CODEWITHSUNDEEP
imagebrowserbackground-imagestretchcss
Jill Wilcocks
Jill Wilcocks

Reputation: 47

Background image doesn't fit browser when resized

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;
}

Upvotes: 4

Views: 3232

Answers (3)

Matt Coughlin
Matt Coughlin

Reputation: 18906

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});
});

Upvotes: 1

Mr Lister
Mr Lister

Reputation: 46569

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.

Upvotes: 2

Ömer Faruk Almalı
Ömer Faruk Almalı

Reputation: 3822

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.

Upvotes: 1

Related Questions