CSS: The Missing Manual

Backgrounds

CSS provides several properties for controlling the background of an element, including coloring the background, placing an image behind an element, and controlling how that background image is positioned.

background

Provides a shorthand method of specifying properties that appear in the background of an element, like a color, an image, and the placement of that image. It combines the five background properties (described next) into one compact line, so you can get the same effect with much less typing. However, if you don't set one of the properties, browsers use that property's normal value instead. For example, if you don't specify how a background image should repeat, browsers will tile that image from left to right and top to bottom (see Section 8.3).

• Values: The same values used for the background properties listed next. The order of the properties isn't important (except for positioning as described below) but usually follow the order of background-color, background-image, background-repeat, background-attachment, background-position.

• Example: background: #333 url(images/logo.gif) no-repeat fixed left top;

background-attachment

Specifies how a background image reacts when your visitor scrolls the page. The image either scrolls along with the rest of the content or remains in place. You can add a logo to the upper-left corner of a very long Web page, using the background-attachment property's fixed value, and make that image stay in the upper-left corner even ...