Stretched background demo

This page demonstrates how you can use a background image that is automatically stretched to the width of the canvas.

The image is technically not a background image but a content image. The width of the image is set to 100%, without setting the height, which means that browsers scale the image.

The image is the sole content of a div element, and the page content is in another div element. These div elements are absolutely positioned in the same place, and the content div has larger z-index value and transparent background.

If the height:width ratio of the canvas is larger than that of the image, there will be empty space below the image. Therefore it is best to set the page background to a color that somehow matches the image.

To make the page decently printable, special CSS settings are needed for print media, so that the image is omitted.


Jukka “Yucca” Korpela
2010-03-14