Bootstrap make image full width in container

Question

I am trying to make full width background-image not img tag. But it must outflow of container. Can i make it full with like 100%

Here is JSFiddle

Trying to make like this:

.long {
    background-image: url("https://via.placeholder.com/400x400");
    height: 400px;
    width: 100vh;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
   <div class="row">
        <div class="col-3">
            <img class="img-fluid" src="https://via.placeholder.com/400x400" alt="">
        </div>
        <div class="col-3">
            <img class="img-fluid" src="https://via.placeholder.com/400x400" alt="">
        </div>
        <div class="col-6">
            <div class="long"></div>
        </div>
   </div>
</div>

refer https://stackoverflow.com/questions/12082913/with-css-how-do-i-make-an-image-span-the-full-width-of-the-page-as-a-background link — supriya suresh g, May 14 '19 at 10:26
Sory. edited question. I want to make full with outside of container. — wpuzman, May 14 '19 at 10:29
Do you mean like this? https://stackoverflow.com/questions/42828683/is-it-possible-to-set-a-background-in-a-bootstrap-column-that-oversizes-the-div — Carol Skelly, May 14 '19 at 10:30
This is not possible, you must put the image on the container (e.g. the row) itself. — cloned, May 14 '19 at 10:30
Related if not direct dupe - https://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen or https://stackoverflow.com/questions/33564131/bootstrap-full-width-with-2-different-backgrounds-and-2-columns — Paulie_D, May 14 '19 at 10:44
It must me like this `width: calc(50vw - 50%);` but i can't do it. — wpuzman, May 14 '19 at 10:48

score 1 · Answer 1 · answered May 14 '19 at 10:30

1

You can use below code, it will work perfect

.long {
background-image: url("https://via.placeholder.com/400x400");
height: 400px;
width: 100%;

}

answered May 14 '19 at 10:30

Abhishek Verma

41
3

I am not talking about it. See edited question please. – wpuzman May 14 '19 at 10:32

score 0 · Answer 2 · answered May 14 '19 at 11:43

You can add a CSS blog here:

background-size: 100% auto;

and the other hand if no needed duplicate only center and cover then use

background-size: cover cover; background-position: center center;

Maybe it's fixed your problem.

.long {
    background-image: url("https://via.placeholder.com/400x400");
    height: 400px;
    width: 100vh;
    background-size: 100% auto;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
   <div class="row">
        <div class="col-3">
            <img class="img-fluid" src="https://via.placeholder.com/400x400" alt="">
        </div>
        <div class="col-3">
            <img class="img-fluid" src="https://via.placeholder.com/400x400" alt="">
        </div>
        <div class="col-6">
            <div class="long"></div>
        </div>
   </div>
</div>

Bootstrap make image full width in container

2 Answers2