Question

So far I have managed to get the background image to stretch:

XHTML:

<div id="background">
    <img src="images/background.jpg" alt="Background" />
</div>

CSS:

#background
{
    width: 100%;
    height: auto;
    position: fixed;
    left: 0px;
    top: 0px;
}

#background img
{
    width: 100%;
    height: 100%;
}

This works well, except the image is being displayed from the top when the height of the image exceeds the window height. This means that the top of the image is always displayed but the bottom is cut off. I want to change this so that the image is always displayed from the centre (so that both the top and bottom of the image is cut off and the centre is of the image is displayed).

Answer 1

Here is a good tutorial on creating a perfect full page background image. The same concept can be applied to any ol’ div as well.

In general, images that are meant to be background images shouldn’t appear in the markup itself. You’re mixing presentation with content.