The fixed positioning of backgrounds is a nice technique and it adds some perspective to the page. But play around a bit, and the results are pretty amazing.
How does that work then?
First of all, keep in mind that IE does not get
position: fixed. And that’s the real trick in this. But it won’t work as it should as I use PNG (yes,
<abbr> as I pronounce it as
pee-en-gee). There are numerous workarounds though.
When you use backgrounds on elements, you can give them a certain position, just as with any other element. You can position it fixed as well, which is pretty neat. The background stays where it is on the viewport, and that’s an important element. This allows you to do some crazy shit.
Now, this one is not so much of teaching you stuff, but I think this does show what is possible when you use the elements HTML and BODY for independent backgrounds. I shall try and post up some examples soon of what else you can do with these techniques.
Now, here it is: it does not work in IE. Devnull’s method seems to work, and there’s also a PNG hack. If you like, you can have it work in IE. Whatever :) Also, don’t start at me about its looks: it’s just a proof of concept, nothing more.
Do tell me if things break, and make sure to check it on IE for laughs.