Zooiblog

Search the Zooiblog

Follow the discussion below and participate.

Support this site.

Fixed positioning and backgrounds

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.

10 comments

  1. You finally posted it :D. I wish Firefox wasn’t so laggy with stuff like this though...

  2. I take it this technique will be mostly used for adding watermarks to pages, not really for groovy fixed headers ;P

    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.

    You can even fool Firefox through this: right-clicking on the HTML background (the html.png one, the semi-footer) and then clicking View background image will take you to body.png. (Yes, I actually spend my days testing for shit like this.)

  3. There’s also this entry from the CSS Zen Garden that uses a fixed background. Again, Not IE.

  4. That’s a great example to link to, Jonathan! Nice...

  5. Nicely done. Hoping to implement it on your new design, are you?

  6. Okay... I thought the example you gave, Rob, was cool, but of course I thought to myself, “I wouldn’t really use that”. However, when I saw the CSS Zen Garden example, I thought “whoa, I gotta check this out”. Not bashing your example, but the other one was mind-blowing in what the author chose to do with that technique.

    However, this is a great post. I had not considered using separate backgrounds for HTML and BODY.

  7. Jonathan, I know that entry. It got me the idea for the header image.

    Charles, it wasn’t my intention to make it mind-blowingly cool. It’s just a rudimentary display of the possiblities. The Zen Garden entry is much more useful, but then I could just have linked to that, no?

  8. The Zen Garden entry is much more useful, but then I could just have linked to that, no?

    So why didn’t you? :P

  9. You will appreciate the headaches I had with my fixed elements then, getting them to work in both I.E. and FF.

  10. I think fixed its simply awful and the sort of garbage teachers and people who generally will never make anything other than a 3 column coloured layout with 2 images on. Hence they dont understand that making a real website is extremely difficult using position fixed all for what exactly? So it doesnt move off the screen like absolute does? Even though one line of code fixes that for absolute? It doesnt make any sense really and its one of those things that is preached but in practice its easy on a simple design but in the real world of creative designs it makes the website take 100 times as long to make for no reason.

Participate, yes!

(Rock out with Textile; it's what the cool people use!)