background test

jessey.net | Simon | articles | next article

I have designed this page to test the background-attachment: fixed property of Cascading Style Sheets. This aspect of the page has been done purely with CSS Level 1. Not every browser supports all of the Cascading Style Sheets Level 1 specifications. I've tested this on a few browsers. Mozilla 0.8 and later seems to handle the effects with no problem. Netscape 6.x also seems fine with it, which probably means that any browser based on the Gecko engine will work. Neither Opera 6.0 nor Internet Explorer 6.0 correctly handle the background-attachment: fixed property, except when applied to the body element, so the effects don't work.

The hover effects on the links are using a tiny bit of CSS Level 2, though I have found this to be reasonably well supported by all 5.x browsers. Please view the source code of this page to see the style rules. I have deliberately avoided using an external style sheet (my usual preference) to make it easier for you to follow the example.

how it works

First, I downloaded a nice picture from somewhere on the NASA Photo Gallery and manipulated it a little bit to make it suitable as a page background. I saved it as a JPG file. Next, I made two alternative versions of the file; a waxy, darker version (with a blue hue) and an even darker version.

The content of the page is contained within a div element with an attribute of id="content"

I then applied a style rule of
background: black url(bg.jpg) 0em 0em no-repeat fixed to the body of the page,
background: black url(bg-wax.jpg) 0em 0em no-repeat fixed to the div element and
background: black url(bg-wax-lightest.jpg) 0em 0em no-repeat fixed to the headings.

Quick explanation of the style rule

This is a CSS shorthand property. It allows you to define several rules at the same time. In this case, black sets the background color to black and url(bg-wax.jpg) tells the browser to present the named image over the top of the background color. It is crucial to understand the implications of this. If the image file cannot be found, the black background will be seen (and it is thus important to set a contrasting text color). Furthermore, if the image has transparent information, the black background color will be seen through the transparent areas. 0em 0em tells the browser to begin displaying the image at the very top and left of the browser's viewport. The value of no-repeat tells the browser not to tile the image. Finally, the value of fixed is telling the browser to fix the position of the image with respect to its viewport.

This is the point where some browsers have difficulty, as mentioned previously. They cope well with fixing the position on the body element, but at the time of writing (August, 2002) they are violating the style rule and fixing the images with respect to the elements that contain them. Hopefully, future versions of Internet Explorer and Opera will rectify this problem.