HTML & CSS: The Good Parts

CSS Backgrounds

You can use CSS background images in many places. If it has an element box, you can almost always apply a background to it.

The best place to start is with a survey of the CSS properties that affect background appearance, shown in Table 9-3.

Table 9-3. CSS background properties (default values shown in boldface)

Property	Purpose	Values
background	Shorthand property, aggregates property/value pairs
background-attachment	Prevents backgrounds of elements with scroll bars from scrolling along with content	fixed scroll
background-color	Defines the background color	[color] transparent
background-image	Specifies the background image to be applied to the element, which will be stacked over any background color	none [url]
background-position	Contains horizontal and vertical values separated by a space; defines the relationship between the edges of the element and the edges of a background image	[length] [percentage] bottom center left right top
background-repeat	Specifies the axes along which the background image should repeat, if at all	no-repeat repeat repeat-x repeat-y

Setting background-position Values

When a background-position value is provided, it should contain two components: the left offset and the top offset. When length units such as px or em are used, the results are straightforward: the background image is offset to the element coordinates specified. If any of the values are negative, the top-left corner of the “first” instance of the background image will be laid out of view.

If percentage ...