Make an image inside a div act like a background image cover

Question

Trying to have an inline image auto crop inside a div to simulate a background image. I tried using absolute position with a size larger than 100% but when you resize it works for the height one time and then breaks for the width another. I am assuming the square shape doesn't help any. Do you have any suggestions on how to resolve 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>

I agree with @DrydenLong - plus, there are a few `background-size` options to use: I tend to go for `background-size: cover` and then `background-position: center`; how you do it is up to you :) — Geoff James, Jun 23 '16 at 20:27
I tried that but since the image is inside a floated div the column heights don't match. As you resize the window the column goes from a square to a rectangle. So maybe I have to swap images at the breakpoint. — JacobLett, Jun 23 '16 at 20:28
Do you want your image to be the background of its immediate parent (`
`)? This might be tricky, as the bootstrap `col` classes use float — Geoff James, Jun 23 '16 at 20:29
http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height — DaniP, Jun 23 '16 at 20:35
Good shout @DaniP - I'll be bookmarking that link for future reference! :) — Geoff James, Jun 23 '16 at 20:36

score 3 · Accepted Answer · answered Jun 23 '16 at 20:47

I've just had a play with your CodePen code.

This might 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 is still there (with its opacity set to 0), so it's still "there", and gives the div some height. Please do not use in-line styles, like I have; move them to a CSS class - I've just done it for the example!.

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

Note the use of the clearfix class in the <i> tag, just so that the content beneath doesn't float up and into this lot. You might also want to use the clearfix in other divs - very useful class! :)

Any questions, just ask.

Hope this helps! :)

+1 super clever changing the opacity. I was working on some JS trickery, but this seems like a better solution to me... — Dryden Long, Jun 23 '16 at 20:55
Thank you very much Geoff James. This looks like it will work and I really like your use of the inline image to set the height. I have seen a similar technique with owl carousel and I think the cycle2 plugin of a transparent placeholder. Must do the same type of thing. The only addition I am going to make is to add the background img url via javascript to make it more CMS friendly. — JacobLett, Jun 24 '16 at 00:39
Pleasure's all mine :) Good note with the JS modifying the background image for reusable code. I'll add some sample JS when I get a chance (it's late and I'm on the mobile app) - just for future-comers. **As an aside thought** - how about only changing the `opacity` of the original `` tag from your JS, once you've set the background of the parent? This will mean when the page is rendered; mainly for browsers with scripting turned off, your image will still be visible (until (if) the script runs, switching it to a background img etc.). — Geoff James, Jun 24 '16 at 00:54
Here is an all javascript solution to work well with a CMS. If the user has javascript disabled it will fallback to the image. So it is a win/win. Thanks again Geoff. http://codepen.io/JacobLett/pen/gMgOBj — JacobLett, Jun 24 '16 at 15:04
I'm glad you got what I meant with my last suggestion - it was late at night! And you've saved my little brain with that CodePen JS you've written - been a lonnnnng day! *sigh*. Hats off to you @JacobLett - Best regards to you in your project :) — Geoff James, Jun 24 '16 at 15:07

Stubbies · Answer 2 · 2016-06-23T23:59:48.870

0

I'm adding it as background-image style to it's 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>

edited Jun 23 '16 at 23:59

answered Jun 23 '16 at 22:49

Stubbies

3,054
1
24
33

Hmm... I like your approach with the JS copying the url attribute. I'm afraid I don't like that the `image` and `image-holder` classes both have fixed heights of `350px` - the idea of setting the image to be `responsive` is completely counter-productive to this code – Geoff James Jun 23 '16 at 23:42
Also (and I'm being pedantic here - excuse me), your `no-repeat` declaration when the size is `cover` is redundant, as it would never be smaller than the container (it's `cover`ing it) – Geoff James Jun 23 '16 at 23:49
Removed the js part and the `image` class. There's no fixed height now. – Stubbies Jun 24 '16 at 00:01
Ok fair enough. But now you've `display: none` the `img-responsive` class the div will have no height at all (plus this would break ALL other `img-responsive`s if it's set in a stylesheet and used site-wide). And I did say I **like** your JS approach; but now you've removed it :( Also, when you had the image still visible in the DOM (and not `display: none`), the image itself would still appear over the top of the background image of the div – Geoff James Jun 24 '16 at 00:12

Make an image inside a div act like a background image cover

2 Answers2