In the Lab: Doing strange things to CSS Backgrounds

So, last year you might remember me running through some experiments with using percentages to position your background-image in CSS. The short version: Percentages are slightly counter-intuitive but quite powerful — if it wasn’t for IE6-7 sucking by always minutely miscalculating them.

In the original post we stuck mostly to the more predictable and commonly-used percentages — from 0-100%. Today I thought we might look at some of the interesting things that happen if start to crank those numbers.

Now to be clear, this is mostly ‘theoretical CSS’ in a Stu Nicholls kind of way and probably isn’t stuff you’ll be finding a use for every day. Hopefully it will, at least, be handy for helping you to get a good grip on the subtleties of how percentages interact with images. With luck it might even come in handy at some point in the future.

Let’s look at a starting example, taking a background-image positioned 150% 0%. The zero is a no-brainer, and will obviously place the graphic on the top edge of the box.

For the horizontal position the browser will first locate a spot 50% to the right side of your DIV. It will then find a spot 50% to the right hand side of your image, and align those two points. This will actually have the effect of moving your image back towards (relative to the original point you located).

This means that if the image is small, that offset will also be small and the image will remain mostly, if not entirely hidden beyond the right edge of your DIV.

If the image and DIV are the same size, these offsets will cancel each other out, and the image will be positioned in the horizontal center of it’s DIV.

Howver, if the image is larger than it’s containing DIV, this offset will actually start to move to the LEFT of the containing DIV. Weird but it makes sense if you think about it.

Large percentages in action

Negative percentages work the same way, only to the left of screen.

However it’s when you set your background to tile horizontally that really interesting things start to happen (background-repeat: repeat-x;). While the tiling effect will ensure your image will always be visible, setting large percentages means even a small resize of your browser will translate into a massive repositioning your background graphic. For instance, if your background-position is set to -500%, a 50px increase in your browser will slide your background-image 250px to the left.

Rather than explaining this, it’s easiest to just to demonstrate it via this little example I’ve cobbled together for the The Art and Science of JavaScript book launch.

Start your browser smallish, grab a corner and as you begin to resize the application up and down, you should see an animated ‘diorama’ effect happening around the limo. Each of the ‘stage layers’ (i.e. the cityscape, background crowd and foreground crowd) is given a larger negative percentage than the one before it (-100%, -250% and -550% respectively).

The limo is given a positive percentage of 150%, which drives it in and out of the right hand stage as you resize.

Kinda mesmerizing in a Mario Brothers kind of way, isn’t it?

So are ‘resize animations’ the future of the web?

Clearly not, but it does offer a few practical possibilities. I could imagine some nice ideas with site headers where a number of partially-transparent layers were overlayed and positioned with large percentages. Resizing the browser would change the way these layers interacted, perhaps making the header appear radically different at various browser resolutions. As an analog, think of the large changes a small twist can create in a kaleidoscope.

James has also speculated about employing the trick in JavaScript animations.

Even if nothing particularly practical ever comes of it, it was a lot of fun to fiddle with and I think I’ve got a rock solid grasp on how percentages work now. Hopefully it clears things up for a few others too.


*Note: Linux doesn’t re-render the browser when resizing until you release the window edge, so you can’t see this animating effect on a Linux box.

**Note: Apparently most Linux distros show the animation fine. Must be a setting in my Gnome setup.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.broken-links.com/ stopsatgreen

    Very interesting. Using some simple DOM scripting to resize the containing DIV could lead to very pleasing animations.

  • http://blog.heuristicdesign.co.uk Hal9k

    Note: Linux doesn’t re-render the browser when resizing until you release the window edge, so you can’t see this animating effect on a Linux box.

    The effect works in Ubuntu, Firefox 2.0.0.11.

  • dusoft

    Animation works for me on Slackware Linux 12.0 and Firefox 2.0.0.11

  • dusoft

    you just probably had something set up incorrectly in your KDE, if that doesn’t work for you.

  • Wacky

    Another confirmation that the drag-the-window effect works for me on Linux, specifically Ubuntu 7.10, with Firefox 2.0.0.11, Opera 9.5 Beta 1, Konqueror 3.5.8, and a recent WebKit nightly.

    Also, there’s a typo shortly after the illustration: “However it’s when you set your background to tile horizontally that really interesting things start to happen (background-repeat: x-repeat;).” – I suspect that the “x-repeat” was intended to be “repeat-x”.

    Thanks for writing a fascinating article (or blog post, whichever – it’s a great mini-article), Alex, and for the demonstration of the fun that can be had with percentages in your limo example!

  • alRedha

    amazing! but the animation doesn’t work for me on windows XP SP2 firefox 2.0.0.11 and IE6 …….. something wrong with my PC?

  • http://www.sitepoint.com AlexW

    Interesting. I’m running Linuxmint at home, and when I resize the browser it gives me a bluish tinged box as I resize and than as I release it, the browser jumps instantly to that size, foregoing any animation. Glad it’s not a total linux thing.

  • http://www.sitepoint.com AlexW

    Also, there’s a typo shortly after the illustration: “However it’s when you set your background to tile horizontally that really interesting things start to happen (background-repeat: x-repeat;).” – I suspect that the “x-repeat” was intended to be “repeat-x”.

    Quite right. Well spotted. Fixed.

  • P

    Nice effect :-) I used a similar technique on http://www.nautic-sailing.no ( the client f**ked up the navbar), but with fewer layers. Looking forward to reading your book btw :-)

  • http://www.pmob.co.uk Paul O’B

    Love the limo demo Alex – it made me smile:)

    Great article as usual.

  • RichardQ

    What a complete utter waste of time and effort. That’s at least 5 minutes of my life I’ll never get back.

    I love it!

    I wonder what happens when you start mixing semi transparent PNG files.

    Maybe logos with windowed letters and flame shapes! Gee. If only I was an artist.

    The time wasting opportunities are endless!

    Excellent article.

  • Reliable

    Looking at your creation, its source code, and the related blog entries gave me an idea and, therefore, a question. (Too bad I don’t know scripting languages well enough to answer or do this myself). IS there any JavaScript, DHTML, or other scripting language available or could any one of those be manipulated that when the user closes the window it begins resizing itself to a certain point (like say once the limo is out of site) and THEN it closes? A useful animation for banners or other marketing ideas or simply to make a site more fun or “playful” if you will.

  • http://www.sitepoint.com AlexW

    IS there any JavaScript, DHTML, or other scripting language available or could any one of those be manipulated that when the user closes the window it begins resizing itself to a certain point (like say once the limo is out of site) and THEN it closes? A useful animation for banners or other marketing ideas or simply to make a site more fun or “playful” if you will.

    If by ‘close the window’ you mean clicking the ‘X’, then no, there’s no way of using Javascript to control the shutting down of the application.

    If you mean ‘size down the window’, then sure, you could make it stick to a series of preset sizes with a little JS.

  • Tonypm

    Calcualtions like that just do my head in, but I think the end result is really cool.

    Thanks for an excellent concept. I want to find time to do one for my web site.

    Tony

  • Markus Koljonen

    Yep, the Super Mario vibes are there! Wonder what the future’ll bring, looking at Super Mario today.

  • http://pixelsheaven.com Ronny

    So, did anyone do something useful with this technique over the last 6 months? :-)

  • http://www.sitepoint.com AlexW

    So, did anyone do something useful with this technique over the last 6 months? :-)

    Yep, it’s been used in quite a few places, most notably http://silverbackapp.com/ (although it’s 404ing as I type this).