Posted by & filed under HTML.

The goal here is a background image on a website that covers the entire browser window at all times. Let’s put some specifics on it:

  • Fills entire page with image, no white space
  • Scales image as needed
  • Retains image proportions (aspect ratio)
  • Image is centered on page
  • Does not¬†cause¬†scrollbars
  • As cross-browser compatible as possible
  • Isn’t some fancy shenanigans like Flash

We can do this purely through CSS thanks to the background-size property now in CSS3. We’ll use the html element (better than body as it’s always at least the height of the browser window). We set a fixed and centered background on it, then adjust it’s size using background-size set to the cover keyword.

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Browser Support

  • Safari 3+
  • Chrome Whatever+
  • IE 9+
  • Opera 10+ (Opera 9.5 supported background-size but not the keywords)
  • Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

The numbers in the table specifies the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specifies the first version that worked with a prefix.

Chrome Safari Firefox Opera IE
4.0
1.0 -webkit-
4.1
3.0 -webkit-
4.0
3.6 -moz-
10.5
10.0 -o-
9.0

Leave a Reply

Your email address will not be published. Required fields are marked *