The style declarations contained within this page:
body {background-image: url(pix/test1.jpg); background-attachment: fixed;}
.test {background-image: url(pix/test2.jpg); background-attachment: fixed;
padding: 50px; border: 1px dotted silver;}
.cl1 {background-repeat: repeat-x;}
.cl2 {background-attachment: scroll;}
.parent, .inh1 {background-image: url(pix/test2.jpg);}
.parent {background-attachment: fixed;}
.inh1 {background-attachment: scroll;}
The background of this document should be a repeated pattern of the word "TEST" at 45-degree angles. This background should fill the entire viewport and not scroll when the document itself is scrolled. This document will be extra-long in order to create a scrolling effect, but consider resizing the browser window if your display area is so large that the entire document can be seen without scrolling.
[test] The background of this 'p' element should be filled with a tiled "TEST" pattern where the letters in the words "TEST" are filled in. This background should line up precisely with the background of the 'body' element. As the document is scrolled, the effect should be that of a moving window through which the filled-in "TEST" background is visible. The background of this element and that of the 'body' element should always line up precisely, and should never move along with the scrolling document.
[test cl1] The background of this 'p' element should be transparent on document load, so the 'body' background will "shine through" this element. As the document is scrolled, pay attention when this element reaches the top of the browser window. As it scrolled past the top of the window, the "TEST" pattern should shift to a single horizontal stripe of filled-in letters. Depending on the height of this element, it may be possible that the single row is visible at once, or only portions of it may be visible.
[test cl1] The background of this 'p' element should be a repeated pattern of the word "TEST" at 45-degree angles and the letters filled in. This tile will start at the top left corner of the element's background area. As the document is scrolled, the pattern will scroll along with it. The pattern may or may not line up with the 'body' element's background, but it is most likely that it will not. If it does, resize the browser window so the patterns do not line up.
A quotation of the relevant section of the CSS2 specification:
| Value: | scroll | fixed | inherit |
| Initial: | scroll |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
If a background image is specified, this property specifies whether it is fixed with regard to the viewport ('fixed') or scrolls along with the document ('scroll').
Even if the image is fixed, it is still only visible when it is in the background or padding area of the element. Thus, unless the image is tiled ('background-repeat: repeat'), it may be invisible.
Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
background-attachment value. If the background pattern begins at the top left corner of this element's background area, or it scrolls along with the document, or both, the test has been failed.