ptg16476052Image Backgrounds 2239
You can also specify negative percentages for the background-position tag, if you want to
position the background partially outside its container. This can be useful with tiled back-
grounds if you don’t want the upper-left corner of your background image to start in the
upper-left corner of its container.
The final individual CSS property associated with backgrounds is background-
attachment. It supports three values: scroll, fixed, and local. The default value is
scroll—the background will scroll along with the element in which it is contained.
fixed indicates that the background should not scroll at all; when the browser’s viewport
moves, the image maintains its position. The local setting means that the image will not
move when its containing element moves but will scroll if the containing element itself
scrolls. Usually this property is used to pin a background image to a fixed location in the
browser window so that it doesn’t scroll with the rest of the page.
Instead of using all these different properties to specify the background, you can use the
background shorthand property by itself to specify all the background properties. With
the background property, you can specify the background color, image, repeat setting,
attachment, and position. All the properties are optional, but they must appear in a spe-
cific order. Here’s the structure of the property:
background: background-color background-image background-repeat background-
attachment background-position;
To condense the preceding specification into one property, the following tag is used:
FIGURE 9.16
Using background-
position with a
background image.