Please note that this "hack" works in IE/PC 5, 5.5, and 6.0, Mozilla 1.6, Firefox 0.8, and Opera 7. If you scroll by highlighting text and dragging in Opera nothing happens, and in Mozilla/Firefox some really strange rendering bugs show up. In NS 6.2/7.1, no background is visible but there are no bugs with rendering when the highlight-scroll is employed. As soon as you dynamically change the font size in Mozilla/Firefox using the mouse-wheel or the KB shortcut the background image disappears.
When you dynamically change font size on Opera for this fixed-height background version, the background changes accordingly and it looks really ugly.
Also, please NOTE that IE has to be in quirks mode for this to work... notice the lack of the DOCTYPE in this document. I'll see if I can get this to work in compliant mode sometime later. When I put IE 6 back into standards mode, the background image resizes proportionately instead of stretching to fill the viewport. Odd.
Lastly, please note that this technique seems to mess with the mouse scroll-wheel and make it generally not work well. It seems to only work when you are actually hoving over text on the page. Go figure. After a bit of messing around I figured out a work-around. To get around this, I changed the margin on the p's to 0 and set the padding instead. Now there are no gaps and the scrolling works. To see an example where it doesn't work, put the mouse between this paragraph and the next.
This paragraph uses margin instead of padding for spacing. Notice how the scroll-wheel doesn't work when you place it just above or below this paragraph? Yeah, definitely one of those "What the heck?!" moments.
Click here to see a version with a variable-height, variable-width background.
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah