Yeah - I've kept the distraction, just in case you didn't fetch coffee the first time around, or in case your mug is empty already.
You'll notice that two things have changed on this page. First off: the changes you see in color are accomplished by changing only the background-color property of the document body. Since I used a white background with an opacity of 0.8 for the background of div.outerbox you should notice that the background of this text has a small hint of the yellow used for the background.
Many of you may have seen Eric A. Meyer's Complexspiral demo. Here, we use transparent PNGs to achieve the same effect.
If this page for some reason doesn't have scroll bars in your browser, resize your browser window so that you can scroll either horizontally, or vertically, and scroll around.
There is a set of advantages and disadvantages to each of the selected methods. Eric's Complexspiral, for instance, does not degrade in a very pretty manner to Internet Explorer. Your content be accessible in that browser, but it will most probably look ugly, while this demo may have problems in browsers that do renders PNGs worse than IE.
This demo creates pages that are lightweight in download. Since it mostly uses PNG images that are uniform in color, and approximately 200x200 pixels, and one image that can be in a format of your choice. The original Complexspiral demo's images weight in at 70.5 KB. Using transparent PNGs the demo could have been 26.2KB.
Finally, Complexspiral is very fast, since it does not use any compositing of images. Using my method with fixed backgrounds, however, is very slow, since the browser has to calculate more on each redraw.
If I was to exploit any of these tricks I would at the moment do the following:
background-attachment: scrollThat's all there is too it. Really. Finally, I have created some screenshots from some browsers.