Scaled Background Image

Original Experiment Date

December 23, 2003

Description

Update 21/5/2010: being currently the most popular entry page to my website by far, I would like to point out that most modern browsers (e.g. Opera, Mozilla, Safari, Chrome) support CSS3 background-size property, so the hack described on this page is no longer very useful.

Update 16/7/2008: as this is proving to be one of the more popular entry pages to my website, I thought it might be worthwhile mentioning that there are currently three browsers who support CSS3 background-size, Opera, Safari and Konqueror. They still require vendor-specific prefixes, but support is gradually getting there!

The latest level of CSS does not provide a method to scale a background-image to the width or height of the page. To cover the entire background one will often resort to using a large, bandwidth-unfriendly image. Even then, there are always people with huge resolutions (like laptops running 1600x1200) which leave your design ugly. So how to solve this?

The Literary Moose came up with the idea to use Opera's experimental media query support to cater different size background images to different resolutions. However, it is not my cup of tea, as more images require more maintenance. Another thing would be to wait for CSS3 background-size implementation... ETA somewhere between now and the next millenium.

For the shorter term, I came up with a way to emulate a background-image for the body of a page. How does it work? It's quite simple actually. You put an <img> tag in your code which you scale to the viewport with width:100%; and height:100%;. You position this image with regard to the body (either absolute or fixed), make the body background-color: transparent; and give the image a z-index: -1;. Et voila, you've got a scaled background image!

A very good application for this technique is Opera Shows where the background-image would cover the entire slide, regardless of the resolution of the projector. In order to demonstrate this, I adapted a presentation by Hakon Wium Lie with this technique and spiced up the styling a bit. Don't forget to press F11 to actually view the presentation.

Test

A demo page for scaled background images.

Advantages

With a simple technique one can create a scaled background-image, that fits the height and width of the viewport.

Disadvantages

There are several disadvantages. Most importantly it does not degrade well to old browsers or when images are turned off. In the latter case the user will see alt-text, which is a bad background-image... Another problem is that the image gets distorted when the viewport has a significantly different x:y ratio, and finally, one has to be careful with applying styling to the root element in order not to break the technique.

Browser support

Opera 7+, IE6, Mozilla Firefox 1.5