How do I use a background image?
Author: Deron Eriksson
Description: This CSS tutorial describes how to work with background images.
Tutorial created using: Windows XP


Page:    1 2 >

A background area of an element consists of the content area and the padding area. A background can be a color or an image. A background color can be specified using the background-color property. A background image can be specified using the background-image property, where the url of the image is supplied as the value of the property.

In addition, the background-position property can be used to set the position of the background image. By default, it is at "0% 0%". Possible values include lengths, percentages, and keywords. Possible vertical keyword values include top, center, and bottom, and possible horizontal keyword values include left, center, and right. Keyword values cannot be used with length and percentage values, although length and percentage values can be used together. If two lengths or percentages are given, the horizontal position is the first value.

The background-repeat property can be used to specify how the background image repeats. Its possible values are repeat, repeat-x, repeat-y, no-repeat, and inherit. The default value for background-repeat is "repeat". The "repeat" value tiles the image both horizontally and vertically, the "repeat-x" value repeats the image horizontally, and the "repeat-y" value repeats the image vertically. The "no-repeat" value means that only the single image is present and no repeating occurs.

The background-attachment property isn't typically used very often, but it can give an interesting effect. Its possible values are scroll, fixed, and inherit. Its default value is scroll, which means that the image (or repeating image) scrolls along with the page if you scroll the page in a web browser. If the background-attachment property is set to fixed, the image (or repeating image) stays in the same location while the rest of the page scrolls. This effect is most clearly understood while scrolling a page in a web browser.

(Continued on page 2)

Page:    1 2 >