Background image doesn't fit browser when resized

Question

I can't seem to get my background to stay fitted to my browser when I resize the window. Please help! Here are the images to show you what is going on: View images The first image is how it should be fitted, the second is when I stretch it horizontally and the third is when I stretch is vertically (sorry, not sure why it uploaded my images twice)

Here is my code I am using:

body {
    background: url('images/bkg-img.png');
    repeat: no-repeat;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

There's a minor typo in the code: `repeat` should be `background-repeat` — Matt Coughlin, Apr 25 '13 at 19:54

score 2 · Answer 1 · answered Apr 25 '13 at 19:08

The problem is that background-size: cover covers the background positioning area (see W3C page), which is, in some cases, the calculated height of the body. Not always as high as the window!

The simplest solution I've found is also put a

 html {height:100%}

in the stylesheet. But you might have to experiment a bit with your setup to get it to work the way you want. I'm pretty sure it varies across browsers and depends on whether you're using standards or quirks mode.

score 1 · Accepted Answer · edited May 23 '17 at 11:49

1

There are lot's ways to do this, if you set the image as background-image of body it is not going to shrink or expand it is going to be stay same this is the expected behaviour.

You can use sth. like this for this:

<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>

And style of them:

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

To be able to put your content above of the background image put your content inside another div like:

<div class="pagewrap">
    <p>Content</p>
</div>

And class of it:

.pagewrap {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}

View demo or other techniques, about z-index.

edited May 23 '17 at 11:49

Community

1
1

answered Apr 25 '13 at 18:41

Ömer Faruk Almalı

3,792
6
37
63

Thank you for your response. The thing is that I was using this exact code and it worked great, but the only problem is that afterwards, when I started adding content, the content was going underneath the background image and I couldn't figure out how to pull it out on top? – Jill Wilcocks Apr 25 '13 at 18:48
1

Thank you. This worked for my PhoneGap app when nothing else would. Much appreciated! – T3chDad Sep 12 '13 at 16:21

Matt Coughlin · Answer 3 · 2013-04-29T17:35:51.953

Fixed image

If you don't need the bg image to scroll with the page, you can still apply the bg image to the body tag if you set background-attachment: fixed;

body {
    background: url('images/bkg-img.png') no-repeat 0 0 fixed;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

jQuery

If the bg image does need to scroll with the page, it might be worthwhile to apply some JavaScript or jQuery code, in the interest of keeping the HTML and CSS relatively simple.

function stretchBg(width, height, contain) {
    var pageWidth  = $(document).width();
    var pageHeight = $(document).height();

    if ((pageWidth / pageHeight) > (width / height) == !!contain)
        $('body').css({backgroundSize: 'auto ' + pageHeight + 'px'});
    else
        $('body').css({backgroundSize: pageWidth + 'px auto'});
}

$(document).ready(function(){ stretchBg(640, 480); });   // Page load
$(window).resize(function(){  stretchBg(640, 480); });   // Browser resize

JSFiddle Demo (and standalone version of the demo)

To preserve the aspect ratio, the native width and height of the image are passed to the above function, along with an optional third parameter for whether the bg image should cover or contain the page (the default is cover).

Alternately, here's a more-advanced demo (and standalone version) that automatically detects the native resolution of the bg image currently applied to the body tag. Below is an example of using it:

$(document).ready(function(){
    FullBodyBackground.init({contain: false});
});

Background image doesn't fit browser when resized

3 Answers3

Fixed image

jQuery