CSS can also be used to place images in the background of any element. The property to do so is background-image.

1. body { background-image: url(‘images/gradient.gif’); }

We cannot use src for this – that is an HTML attribute value, not a CSS property, and reserved for use with the <img /> tag. Nor can we use href or a link tag for similar reasons. But once you are past the url prefix, the parentheses and the single quotes (or double quotes, or no quotes at all – either may be used, so long as they are used consistently), the path to the image in the background-image property value is the same as if you were inserting an image directly on a page.

I wish to emphasise that an image can be placed in the background of any element. That being said, body is the most commonly used element for this technique, so we will continue with in our initial example.

We should also note that images that are to be used for backgrounds should be processed through PhotoShop to lower opacity, reduce file size and to create seamless integration between repetitions of the image.

By default an image used as a background image will tesselate both horizontally and vertically through the space used by theelement. If we want to change that, we alter the value of the background-repeat property:

1. body { background-image: url(‘images/gradient.gif’);
2. background-repeat: no-repeat; }

background-repeat can also takes values of repeat-x (to tile horizontally) and repeat-y (to create vertical tiling of the background image).

You can also position the background image in reference to your element. Note that the numerical origin of this position is always the topleft corner of the element’s box.

1. background-position: 20em 10px;

The position values are always horizontal position followed by vertical position, separated by a space, unless the single keyword center is used (note the spelling). For the example above, our background-image would be 20em from the left side of the body and 10px from the top. Numerical position may be measured in any of the CSS units I haveintroduced you to, including mixtures of units, as shown in the example above, and may include negative values.

background-position may also take keyword values: top, center and bottom for the vertical component, and left, center and right for the horizontal. background-position is left top by default. If you wish to have a background image in the center of the element, you may just use:

1. background-position: center;