Perfect Full Element Background Image With CSS3

Posted on by

An HTML element can have a background image. Normally we set it no-repeat, repeat-x, or repeat-y, regardless it is centered or x-y-positioned. There is time we may want it to be covered all over an element, regardless it’s size. Now, 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 all over the element.

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

The above code works in:

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

To make IE do cover backgrounds as well:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";

But careful, reader Pierre Orsander said they tried this and had some problems with links on the page going dead. The above IE filters and having problems with scrollbars or dead links or whatever else should try NOT using them on the html or body element. But instead a fixed position div with 100% width and height.