background-attachment on any element

Tricky browser compatibility problems

As soon as you use background-attachment on elements other than the body, browser compatibility will deteriorate very rapidly. This page tries to bring some order into the chaos. Unfortunately it doesn't offer cross-browser solutions because there aren't any.

My original problem was that I had a div with a background image and overflow: auto. When the user scrolled this overflowing div, I wanted the background image to remain in its initial position. This cannot be done in a cross-browser compatible way.

I want the same options for overflowing divs with background images as for the body:

  1. Either I allow the image to scroll with the div
  2. Or I fix the image relative to the div.

W3C offers a third option, which until very recently I didn't appreciate because nobody made clear why this was a unique solution.

The spec

Part of the problem lies in the CSS specification itself, which gives only two options. 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

Explorer Mac, Mozilla (1.6+), Opera and Safari follow the spec.

Example of 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. Nonetheless Explorer Windows and Mozilla interpret it as such. I can sympathize, I'd like to have a value that allows the image to scroll.

background-attachment: fixed

Example of 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.

The point of W3C's specification is that it allows you to retain a Complex Spiral-like effect even when the div moves relative to the window, for instance because it has a margin-left: 40% and the user resizes the window.
See my example to understand the point.

Three values

In my opinion the background-attachment property of elements other than the body should have three values, not two:

  1. Background scrolls with the element.
  2. Background is fixed relative to the element.
  3. Background is fixed relative to the window.

Browsers have to accomodate these three options with only two values for background-attachment, so they have to drop one. The result:

  1. Explorer Mac, Opera and Safari have dropped the first option.
  2. Mozilla has dropped the second option.
  3. Explorer Windows has dropped the third option.

Update: Mozilla 1.6 has switched to the IE Mac/Opera/Safari model. Incompatibility has lessened.

This leads to the following incompatibility soup:

Effect Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.0 Opera 7.50
Scrolls with element
scroll scroll Not possible Not possible Not possible Not possible
Fixed to element
Fixed position relative to the element
fixed fixed scroll scroll scroll scroll
Fixed to window
Fixed position relative to the window
Not possible Not possible fixed fixed fixed fixed

Note that scroll is the default value so you can leave it out altogether.

solution: none

None of the three possible effects can be coded cross-browser. The value scroll seems safest to me: all browsers display some sort of nice effect.

If you want to use W3C's fixed you'll have to accept that Explorer Windows doesn't show it as intended.