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.