background-attachment on any element

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

The spec

W3C says:

'background-attachment'
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.

Compatibility