background-attachment on any element

background-attachment needs three values, but all browsers support only two.

The spec

W3C says:

If a background image is specified, this property specifies whether it is fixed with regard to the viewport ('fixed') or scrolls along with the document ('scroll').

background-attachment: scroll

The background image scrolls along with the document. Since scrolling a div is not scrolling the document, the background image of my div with overflow: auto shouldn't react.

scroll does not mean: let the image scroll with the element. The value local does this. Nonetheless Explorer Windows interprets scroll as such.

background-attachment: fixed

On elements other than the body, this value does not what one expects. The background image is fixed, not relative to the element but relative to the entire window. To the uninitiated, the effect can be quite startling.

It's best to see the element as a sort of "window" through which you view the background image. If this "window" moves, you see a different part of the background image.

See my example to understand the point.

background-attachment: local

This CSS3 value says the background has to scroll with the element. Currently no browser supports it. I hope support comes soon; we need this value.


Selector IE 5.5 IE 6 IE 7 pure IE8b2 as IE7 IE8b2 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win iPhone 3G Chrome 0.3 Opera 9.51 Opera 9.62 Konqueror 3.5.7
Scrolls with element.
Test page
Alternative No No No No No Alternative
If a browser doesn't support local it uses the default value scroll. Curiously, since scroll means local in IE and Konqueror, these browsers are quite by accident the only one to support local, though for the wrong reasons.
Fixed position relative to the element; scrolls with document
Test page
local Yes Yes Yes Yes Yes local
Fixed position relative to the window; does not scroll
Text page
scroll Yes Yes Yes No Yes Yes Yes