Make the image inside the div act as a cover for the background image

Question

Trying to have an inline image automatically crop inside a div to simulate a background image. I tried using an absolute position with a size greater than 100%, but when resized, it works one height and then breaks the width of the other. I suppose the square shape does not help. Do you have any suggestions for resolving this result?

Is JavaScript the best way to make this work?

body { background: #000; } .container { background: #ccc; } .row { border: 1px solid #fff; } .col-md-6 { border: 1px solid red; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-md-6"> <img src="http://dummyimage.com/600x500/500/fff" class="img-responsive" /> </div> <!-- /.col-md-6 --> <div class="col-md-6"> <h2>Heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis officia animi consectetur obcaecati cum harum aliquam qui nisi aliquid sint. Nobis voluptas sequi voluptatem soluta ex sed nisi, sapiente dicta!</p> </div> <!-- /.col-md-6 --> </div> <!-- /.row --> </div> 

Answer 1

I just had a game with CodePen code.

This may help / be what you want:

HTML:

 <div class="container"> <div class="row"> <div class="col-md-6 background-cover-image"> <img src="http://dummyimage.com/600x500/500/fff" class="img-responsive" style="opacity: 0;" /> </div> <!-- /.col-md-6 --> <div class="col-md-6"> <h2>Heading</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis officia animi consectetur obcaecati cum harum aliquam qui nisi aliquid sint. Nobis voluptas sequi voluptatem soluta ex sed nisi, sapiente dicta!</p> </div> <!-- Apply clearfix to stop other content floating up over --> <i class="clearfix" aria-hidden="true"></i> <!-- /.col-md-6 --> </div> <!-- /.row --> </div> 

CSS:

 body {background:#000;} .container {background:#ccc;} .row {border:1px solid #fff;} .col-md-6 {border:1px solid red;} // All of these are as before :) .background-cover-image { background-image: url('http://dummyimage.com/600x500/500/fff'); background-size: cover; background-position: center; } 

The secret here is that the original image still exists (its opacity set to 0 ), so it is still “there” and gives the div some height. Please do not use inline styles like mine; move them to the CSS class - I just did it for an example!

It works fine for me - however, you will need to decide when the div in the background image (or whatever you would like to call it) positions itself over other content.

Pay attention to the use of the clearfix class in the <i> tag so that the content below it does not pop up and is not included in this batch. You can also use clearfix in another div - a very useful class! :)

Any questions, just ask.

Hope this helps! :)

Answer 2

I am adding it as a background-image style to it is a parent div.

 body { background: #000; } .container { background: #ccc; } .row { border: 1px solid #fff; } .col-md-6 { border: 1px solid red; } .image-holder { background: center center; background-size: cover; } .img-responsive { display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-md-6 image-holder" style="background-image:url(http://dummyimage.com/600x500/500/fff);"> <img src="http://dummyimage.com/600x500/500/fff" class="img-responsive" /> </div> <!-- /.col-md-6 --> <div class="col-md-6"> <h2>Heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis officia animi consectetur obcaecati cum harum aliquam qui nisi aliquid sint. Nobis voluptas sequi voluptatem soluta ex sed nisi, sapiente dicta!</p> </div> <!-- /.col-md-6 --> </div> <!-- /.row --> </div>