Ever wonder how websites manage those pretty designs and pictures floating behind the text? It's all done through the magic of Cascading Style Sheets. CSS not only allows you to designate an image for your page's background, it also lets you tweak how the image is displayed – so that you can get just the look you want.

The fundamental building block for your background image is, fittingly enough, the 'background-image' property. You use this property to tell your site where the image file is located, as follows:

body {
background-image: url ("image.gif");
}

That's all you need to do to place a background image for your web page. Of course, you'll probably want to customize how the image appears. Let's say you want your image to start at the top of the page but to be centered horizontally instead of left-aligned (the default alignment). In that case, you will want to add the 'background-position' property to your CSS rule:

body {
background-image: url ("image.gif");
background-position: center top;
}

When defining the 'background-position' property, the first value sets the horizontal alignment (left, center or right) and the second sets the image's vertical alignment (top, center or bottom).

Next, you decide that you want to stop the image from tiling (repeating itself) horizontally, although you do want it to tile vertically. It's time to bring out the 'background-repeat' property:

body {
background-image: url ("image.gif");
background-position: center top;
background-repeat: repeat-y;
}

Setting the value to 'repeat-y' tells the browser to tile the background image along the y-axis, aka vertically, but not the x-axis (horizontally), which is exactly what we wanted. If you wanted to tile it horizontally but not vertically you would use the 'repeat-x' value instead; if you didn't want the image to tile at all, give it the 'no-repeat' value. The default value is to tile the image both horizontally and vertically, so if that's the best choice for your image you don't need to set the 'background-repeat' property at all.

Finally, you can take a look at the 'background-attachment' property. By default, your image will scroll as the page scrolls, so if you are not repeating the image vertically and you have a long page your image will not extend to the bottom of the page. You can change this by setting the 'background-attachment' property to 'fixed,' which causes the background image to stay in the same spot on the monitor regardless of how the page scrolls. Now your background image rules will look like this:

body {
background-image: url ("image.gif");
background-position: center top;
background-repeat: repeat-y;
background-attachment: fixed;
}


If you want to keep your CSS rules as small as possible, you can combine all of your background values into one line by using the 'background' property, like this:

background {
url ("image.gif") repeat-y fixed center top;
}

When using the 'background' property you must list the values in a specific order:
[background-color (if used)] [background-image] [background-repeat] [background-attachment] [background-position]. You can leave out any value that you don't need, you just need to list any values that you do use in the proper order or the rule won't work.