Full Page Image Backgrounds in CSS3

I have a couple of domains which I use as placeholders or I use them as an umbrella for other sub-projects. As such, I figured instead of showing a blank white page when visiting the main domain, I could spruce them up a little. The following CSS code can be used to set an image as the entire background of the page.

html { 
  background: url(/img/picture.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Of course it works in most versions of web browsers, except maybe old versions of IE (not surprised...). See my example here.

comments powered by Disqus