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
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:
W3C offers a third option, which until very recently I didn't appreciate because nobody made clear why this was a unique solution.
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').
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.
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.
In my opinion the
background-attachment property of elements other than the body should have
three values, not two:
Browsers have to accomodate these three options with only two values for
so they have to drop one. The result:
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|
ScrollsScrolls with element
|scroll||scroll||Not possible||Not possible||Not possible||Not possible|
Fixed to elementFixed position relative to the element
Fixed to windowFixed position relative to the window
|Not possible||Not possible||fixed||fixed||fixed||fixed|
scroll is the default value so you can leave it out altogether.
None of the three possible effects can be coded cross-browser. The value
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.