Guide to Backgrounds

As the so called "presentation attributes" for the body element have been deprecated, some of you may be wondering how to add a background image to your XHTML document. The answer is to use CSS. The benefit of using CSS is that you can do a lot more with your background image. This tutorial will show you how.

First of all, how do you change the background colour?

For the body, you would use

Where blue can be replaced with the name of another colour, a hex or rgb colour code or transparent. You can also change the background colour of one particular paragraph, heading etc. For example, to change the background colour of h2 to green, you would type

If instead, you want a background image, you would enter

So what can you do with a background image?

There are three different things you can do. These are: repeat the image, define the place where the image appears and fix the image so it does not scroll with the rest of the page.

Firstly, repeating a background image. There are several options available:

repeat
repeat-x
repeat-y
no-repeat

To use this, you would simply add

To your CSS. For example

Positioning the background image is done in much the same way. The different options available are:

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos

For example, if you wanted to have the background image placed right in the center of the page, your CSS would be

Finally, to fix the background so it does not scroll with the rest of the page, you have only two options:

scroll
fixed

Again, just add it to the CSS like so:

You can add all of these different properties in, for example:

Note: I suggest that if you are using a background image, you insert a background-color as well, just in case your background image does not display.