#box1

background-attachment
property has declared
value of fixed.

positioning of bg img is
relative to viewport.

#box2

background-attachment
property has declared
value of scroll.

positioning of bg img is
relative to container.

#box3

background-attachment
property is undeclared.

value should be
initial value of scroll.

positioning of bg img is
relative to container.


CSS background-attachment property Test #1

There should be three boxes in a row across the top of the viewport, each of them 200px square with a white background. Each box should have a 1px black border. They should all be 30px down from the top of the viewport, and spaced out evenly, starting 30px away from the left edge of the viewport, with 30px of space between each. [screenshot]

If you fail to see this much, your browser does not make the grade. MSIE Win fails this part as it does not properly implement fixed positioning. [screenshot]

The boxes have all been given a position property of fixed. Thus they should all retain their position in relation to the viewport. As you scroll down to read this text, the text should move up and behind the boxes. The text should not be visible through the boxes. The boxes should not leave their initial positions. [screenshot]

Each box should have a small background image in the lower left hand corner. They should be 10px away from the bottom and left edges. And they should stay there.

In the first box, the bg img has been given a background-attachment property value of fixed. Thus it should be positioned relative to the viewport and not relative to the box. If the image is shifted towards the centre and down below the edge of the box then it is being positioned relative to the box. [screenshot]

In the second and third box the bg img has a background-attachment property value of scroll. Thus it should be positioned relative to the box.

In the next test the boxes are given a position property of absolute.

CSS declarations for the 3 fixed boxes

#box1 {
text-align: center;
border: 1px solid;
padding: 0px; margin:0px;
width: 200px; height: 200px;
position: fixed;
top: 30px; left: 30px;
background-color: #fff;
background-image: url(bg1.png);
background-repeat: no-repeat;
background-position: 41px 147px;
background-attachment: fixed;
}

#box2 {
text-align: center;
border: 1px solid;
padding: 0px; margin:0px;
width: 200px; height: 200px;
position: fixed;
top: 30px; left: 262px;
background-color: #fff;
background-image: url(bg2.png);
background-repeat: no-repeat;
background-position: 10px 115px;
background-attachment: scroll;
}

#box3 {
text-align: center;
border: 1px solid;
padding: 0px; margin:0px;
width: 200px; height: 200px;
position: fixed;
top: 30px; left: 494px;
background-color: #fff;
background-image: url(bg3.png);
background-repeat: no-repeat;
background-position: 10px 115px;
}

Note: You may also use the shorthand background property to set all the background properties at once. I have set them out separately for clarity. For example for the first box the following background property declaration would achieve the same effect.

background: url(bg1.png) #fff no-repeat 41px 147px fixed;

Browser Reports

Windows

Opera 6 positions all three boxes correctly. All 3 bg images are positioned relative to the boxes - bg image #1 is wrong. [screenshot] The second two bg images scroll with the canvas, which is also wrong. [screenshot] These two bg images should remain positioned relative to their parent element, which in this case is the box they are asociated with.

K-Meleon v0.6 nails it. Every thing appears correct here. K-meleon is based on the Mozilla .9.5 milestone.

MSIE 5.x stacks the boxes below the top body margin(300px below top of canvas). Positions all 3 bg img relative to box. [screenshot]

Mac

Linux

Thanks to Stephane Gourichon, we can say that Galeon-0.12.1-2mdk(mozilla 0.9.4) gets it right [screenshots 1 2], Konqueror 2.2.1 also does fine with its own engine [screenshots 1 2], and Opera 5.0 fails just like Opera 6 on Windows. All on Linux 2.4.8-34.1mdk/Mandrake Linux release 8.1 (Vitamin) for i586.

Any comments or questions may be directed to dylanfoley@sympatico.ca

I would appreciate any reports relating to browsers not yet listed. If you would like to contribute a report please include the following information:

| home | workshop | xhtml | css |