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.
© 2003-2006, Mark Schenk.