The Background-Attachment Property

The background-attachment property determines whether the image should be fixed or moveable on the canvas.

Name:	background-attachment
Value:	scroll | fixed
Initial:	scroll
Applies to:	all elements
Inherited:	no
Percentages:	N/A

This property has two values:

• scroll The image scrolls along with the content. This is the default.

• fixed The image is fixed in regard to the canvas.

A background image is visible only behind the element to which it belongs. When the element scrolls, you usually want its background to move along. The scroll value causes the background to be attached to its element so that where the element goes, so goes its background. That is, as the user scrolls the document up or down or left or right, the background stays behind its element. This is the default. The value fixed, however, means the background is not attached to the element. As the user scrolls the document, the element moves, but the background doesn't.

Unfortunately, we cannot show the effect in this book...

The fixed value is most useful with BODY, where you would set BODY's background and you don't want it to move as the document is scrolled.

You can use fixed to establish a "watermark" that stays where you place it independent of the movement of any other element. A watermark is a translucent design that is impressed on paper during the (traditional) printing process and that can be seen faintly when the paper is held up to the light. They are often corporate logos or other designs and are often used for stationery. Obviously, we can't produce a true watermark on a Web page. But it is possible to create the general effect: an image (usually faint so that text and images can be placed over it and still be read) that remains fixed on the window. A good place for a watermark would be the HTML or BODY element. Here's an example rule that establishes a watermark:

 HTML {   background: white url(watermark) no-repeat center fixed } 

(It uses the compound background property, which is explained later in this chapter.)

You can use fixed further to form a horizontal or vertical band that remains in place even as the document is scrolled over it. The following is an example code that shows how you could do this. It specifies a wave pattern image (back/waves.png) across the top of the BODY element that repeats in a horizontal band (using the repeat-x value). Figure 10.8 shows the result.

Figure 10.8. Using "fixed" to place a permanent horizontal band across the top of the body element: when the scrollbar is scrolled up or down, the pattern across the top will stay where it is.

 BODY { background: url(backs/waves.png) repeat-x fixed }