Scaling background image

Always wanted to have a background image that scaled to your window size? Well, it is possible with some CSS trickery.

The background-image you see here is absolute-positioned to the body and it scales to the width and height of the page. This also means that the image is slightly distored when using a different screen ratio.

A problem with absolute positioning the image is, that if there is so much text that a vertical scrollbar is needed, the image will scroll with the canvas. This can easily be circumvented by using position:fixed on the image, but this doesn't work in IE6 but only in Opera.