background-repeat: no-repeat; background-position: bottom left;

background-repeat: no-repeat; background-position: bottom left; background-attachment: fixed;

so, what's going on here?

Opera Software says that "Positioning of background images is relative to the element box, not the window. This means that in Opera, an image placed with body{background-position: center center} will be roughly in the middle of a page, not in the middle of the window."

And section 5.3.5 of the CSS1 Spec says, "If a background image is specified, the value of 'background-attachment' determines if it is fixed with regard to the canvas or if it scrolls along with the content."

Terminology: canvas is "the space where the formatting structure is rendered." It's not the window (which CSS2 calls "viewport"). It's the whole darn page as laid out in the mind of the browser. The W3C language surrounding this gets a little cagey because they had to consider the possibility of viewports larger than the canvas.

Now the language in 5.3.5 above is a little unfortunate if you're a web developer reading in a hurry. 'Background-attatchment: fixed' ties its position to scroll as you do. 'Background-attatchment: scroll' fixes its position on the webpage. The default value is 'scroll'.

Which means in example 1 the bg img should start in the bottom left of it's box and stay there. In example 2 the bg img should start in the bottom left of it's box and ... um ... stay there? Well 5.3.5 says "fixed with regard to the canvas", and canvas is "the space where the formatting structure is rendered.", not the window. What? Sounds a lot like 5.3.5 meant to say "window" instead of "canvas".

but, what about back there?

When the bg img is applied to the body element, as on the previous page, with 'background-attatchement: fixed', IE and Netscape do interpret canvas as window. For the very sensible reason that if you don't, a fixed bottom bg img in any page longer than its window will never be seen. Opera presents arguably correct behaviour, but it's also insane.

Since the only reason I can think of to have the 'background-attatchement: fixed' attribute is so we can position a body bg img in relation to the window, I think the W3C just had a bad day when they wrote that one up. Which means we're out of luck if we want to use body bg images anywhere other than top, until the W3C updates the errata so browser companies can follow it without interpretation.

so what do our browsers do?

Opera 5.12 fixes the bg img to the bottom left in example 1. In example 2 it starts in the bottom left and scrolls as you do, disappearing beneath all else.

IE 5 and 5.5 and 6 fixes the bg img to the bottom left in example 1. In example 2 it is also fixed to the bottom left.

Netscape 6.1 fixes the bg img to the bottom left in example 1. In example 2 the bg img is gone. I've messed with the code trying to find out where it is. It just isn't there. Likely it's behind something, but I can't figure out what.

That's in Windows. So far, Opera and Netscape for Mac seem to react the same as on PC.

Perhaps someone could fill in what IE5 Mac does. Perhaps I will care. Probably not. Because what it all means at the end of the day is, we're hooped. We pretty much can't use fixed bg images in anything but top positions.

(And with the morning mail comes a screenshot of IE5 Mac. Thanks, Rory. Looks like it reacts the same as Netscape 6.1.)

>BACK TO THE BEGINNING<

Owen Briggs © 2001.
Last updated: 17 Oct 2001