Responsive image with div by css background-image

Question

I have found there are similar questions here, like Responsive CSS background images.

This solution didn't work for me unless I have set the exact height of the image for that div. Firstly, if I don't set its height, the image won't be shown as the height of div will be zero. Secondly, if I set the height for it, it won't be responsive to the browser width. Like if I widen the browser, I expected the image will scale up responsively to fit with the width. But if I use height:100%, the image won't be shown again.

I want it to be: When I adjust the browser width, the image width and height will be scaled up/down responsively with using css background-image attribute.

I guess it is related to some fundamental css tricks but I am not really good at it. Could anyone suggest me some solutions on it? Thank you so much!

.top-banner{
  height:100%;
}
@media (min-width:768px) {
  .top-banner {
    background-image: url('http://everetttheatre.com/wp-content/uploads/2016/03/toy-story-banner.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
}

@media (max-width:767px) {
  .top-banner {
    background-image: url('https://i.pinimg.com/originals/31/de/36/31de3624c128d5748039ae9523223eb5.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
}

<div class="top-banner">

</div>

@mauricebruijn any other css with this line? if I just add margin:0 & height:100% to the div, the image still didn't shown — Sammi, Dec 10 '17 at 17:15
You could try to set the height of the div to 100% and the height of the image to: auto; and the same with the width — maurice bruijn, Dec 10 '17 at 17:17
If this doesnt work try to add a position to the image to relative to the div — maurice bruijn, Dec 10 '17 at 17:18
Setting the height and width didn't work too, and I can't add position:relative to the image as it is called with css background-image — Sammi, Dec 10 '17 at 17:21
First try to make your div responsive then add conctent which is relative to its div and gets responsive — maurice bruijn, Dec 10 '17 at 17:25
I have tried with your suggested way but it didn't work... did I do any steps wrong as you suggested? https://jsfiddle.net/3snoev4g/ — Sammi, Dec 10 '17 at 17:35
I forgot to mention something ghehe, width works with px and % and height does only work with px — maurice bruijn, Dec 10 '17 at 17:47

Pradeep · Accepted Answer · 2017-12-14T07:10:34.320

Height in percentage wont work unless any of the parent element has height in pixel.

My suggestion is to use img tag instead of background-image to make it responsive.

But If you can only use div with background image, then you have change the height of the div on window resize event using javascript.

Like if image is 4:3 ratio, the code will something like below :

<body onresize="resizeFunction()">
   <style>
    .imgBackground {
       width : 100%;
       background : your image link;
       background-size : 100%;
    }
   </style>
   <div class="imgBackground"></div>
   <script>
       function resizeFunction() {
         var widthOfDiv = $('.imgBackground').width();
         var heightOfDiv = width/1.33;
         $('.imgBackground').height(heightOfDiv);
      }
   </script>
</body>

Thanks Pradeep!! Great demonstration – Sammi Dec 12 '17 at 01:02 — Sammi, Dec 12 '17 at 01:02
@Sammi Welcome!! Hope it helped you. – Pradeep Dec 14 '17 at 07:09 — Pradeep, Dec 14 '17 at 07:09

Responsive image with div by css background-image

1 Answers1