During Dan Cederholm's presentation of Bulletproof Web Design at @ Media 2006 somebody asked: "Can you make a website print the background image?"

I have done this on a client project so I answered that you can do by adding the actual background image to the html code. While this is not the cleanest solution in the world, it is the only solution I have come across.

Using display:none to hide it from the design you see on screen will also hide the image from many screen browsers.

In the print styles the hidden background image is then positioned where you need it to be using position: absolute; and stretched 100% to fill the screen. Remember to position elements that need to go on top of the image using position: absolute; and layer it on top of the image using z-index.

A word of warning: Do not use too dark background images as you cannot colour the text in the print css.

Please email me any comments or examples of this technique in use.