#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 #2

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.

The boxes have all been given a position property of absolute. They should all scroll normally along with the canvas.

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.

In the first box, the bg img is 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]

It should maintain its position relative to the viewport and NOT scroll with the canvas. [screenshot]

In the second and third box the bg img is positioned relative to the box. These two bg images should stay with their boxes and scroll normally with the rest of the canvas.

Go on to the next test in which we tile the background images or back to the previous test.

CSS declarations for the 3 boxes

#box1 {
text-align: center;
border: 1px solid;
padding: 0px; margin:0px;
width: 200px; height: 200px;
position: absolute;
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: absolute;
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: absolute;
top: 30px; left: 494px;
background-color: #fff;
background-image: url(bg3.png);
background-repeat: no-repeat;
background-position: 10px 115px;
}

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] Otherwise everything else appears OK.

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

MSIE 5.x positions all three boxes correctly. All 3 bg images are positioned relative to the boxes - bg image #1 is wrong. The bg image in the first box scrolls with the page; this is wrong. [screenshot]

Mac

Linux

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:

If reports are received I may set up a listing of people who have contributed reports, so if you do send one in let me know if you would like to be listed. Include your URL if you like and I'll post a link back to you.

| home | workshop | xhtml | css |