make div background image responsive with bootstrap 3

Question

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">&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>

Answer 1

I 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