Making background image responsive in CSS

Question

I was trying to create a responsive website from scratch without using any frameworks like bootstrap. i had a banner in my website for which i had set background image as follows

<body>
    <div id="pagewrap">
        <div class="test">
            <div class="headers">
                <div class="logo">
                    <a href="#"><img src="images/logo.png" alt="Site Logo"/></a>
                </div><!--logo-->
                <div class="nav"></div><!--nav-->
                <div class="slider_content"></div><!--slider_content-->
            </div><!--header-->
        </div>
    </div><!--pagewrap-->
</body>

.headers {
    background-image:url(images/banner.png);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    width:100%;
}

When I apply height to the div headers image gets displayed but it is taking the same height in mobile devices too which doesn't look good. How do I make this responsive so that the background image scales according to the device resolution.

possible duplicate of [Responsive css background images](http://stackoverflow.com/questions/12609110/responsive-css-background-images) — Persijn, May 15 '15 at 10:16
@Persijn i tried the solution explained there without setting any height or width. but unfortunately its not working — Shareer, May 15 '15 at 10:20

score 1 · Answer 1 · answered May 15 '15 at 10:35

1

Might this will help you, Demo

$( window ).resize(function() {
  var imgHeight = $( window ).height(),
      imgWidth = $( window ).width();
    $('.headers').css({
        height: imgHeight,
        width: imgWidth
    });
});

answered May 15 '15 at 10:35

stanze

2,372
9
13

score 1 · Answer 2 · answered May 15 '15 at 10:39

1

Try applying padding percentages instead of a fixed height.

So padding-bottom:50%; and change cover to background-size:100% auto;

let me know how it goes I think this is how I got round it before.

answered May 15 '15 at 10:39

score 0 · Answer 3 · answered May 15 '15 at 10:18

Have you tried to work with percentage values? Something like height 100% Or you can experiment with the vh-attribute. but when you want to work with vh, make sure you're using jQuery too because of the browser-support:

var viewHeight = $( window ).height();
  $('.element').css('height', viewHeight);

Making background image responsive in CSS

3 Answers3