How make div with background image responsive with bootstrap 3 ??
Is it possible with img-responsive class in bootstrap 3 ??
My div is empty like below:
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="workflowstep workflowstep1 img-responsive">
</div>
<div class="workflowstep workflowstep2 img-responsive">
</div>
<div class="workflowstep workflowstep3 img-responsive">
</div>
<div class="workflowstep workflowstep4 img-responsive">
</div>
<div class="workflowstep workflowstep5 img-responsive">
</div>
<div class="workflowstep workflowstep6 img-responsive">
</div>
</div>
</div>
How make div with background image responsive with bootstrap 3 ??
Is it possible with img-responsive class in bootstrap 3 ??
My div is empty like below:
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="workflowstep workflowstep1 img-responsive">
</div>
<div class="workflowstep workflowstep2 img-responsive">
</div>
<div class="workflowstep workflowstep3 img-responsive">
</div>
<div class="workflowstep workflowstep4 img-responsive">
</div>
<div class="workflowstep workflowstep5 img-responsive">
</div>
<div class="workflowstep workflowstep6 img-responsive">
</div>
</div>
</div>
2 Answers
Reset to default 9I think its not the case to use img-responsive here, since it was for <img />
and for making the div background image responsive, we can use background-size: cover;
background-size: cover;
Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area
To make background-image responsive, you can use background-size: cover CSS property. or if you want to stretch the background-image with resize in the div, use background-size: 100% 100%.
For more info on background-size CSS property go through this link.