Adding Backgrounds - Beginning CSS3 - page 157

local The background is fixed in relation to the element's contents. If the element has
a scrollbar, the background scrolls with the contents. This value is new in CSS3. Not
supported by IE 6-8. At the time of this writing, Firefox is the only modern browser that
doesn't support it.
The best way to understand how these values work is to look at some examples.
Figure 8-9 shows what happens when you set background-attachment to fixed . The background image
in fixed.html is displayed at the top left of the page, and it remains in that position even when you scroll to the
bottom of the page.
Figure 8-9. The background image remains fixed in the browser viewport when the page is scrolled
The styles in fixed.html add the fixed background image to the page like this:
body {
/* Other styles omitted */
background-image: url(images/border.png);
background-repeat: no-repeat;
background-attachment: fixed;
}
The only browser that doesn't support fixed is IE 6. It simply ignores the background-attachment property,
and the background image scrolls with the page in the normal way.
he new local value allows you to attach a background to an element that has scrollbars so that it scrolls
with the content. For example, the <div> with the ID tail in local.html has the following styles that give it a fixed