Make background image div using bootstrap 3

How to make div with background image responsive to loading 3 ??

Is this possible with the img-responsive class in bootstrap 3 ??

My div is empty as below:

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="workflowstep workflowstep1 img-responsive">&nbsp;
        </div>
        <div class="workflowstep workflowstep2 img-responsive">&nbsp;
        </div>
        <div class="workflowstep workflowstep3 img-responsive">&nbsp;
        </div>
        <div class="workflowstep workflowstep4 img-responsive">&nbsp;
        </div>
        <div class="workflowstep workflowstep5 img-responsive">&nbsp;
        </div>
        <div class="workflowstep workflowstep6 img-responsive">&nbsp;
        </div>
    </div>
</div>
+4
source share
2 answers

I think it’s not here to use img-responsivehere, as it was for<img />

and to create a background image divwe can usebackground-size: cover;

background-size: cover;

Scale the image, keeping its internal aspect ratio (if any) to a minimum size, so that its width and height can completely cover the background positioning area

+9

, background-size: cover CSS. div, background-size: 100% 100%.

CSS .

+8

All Articles