Variable Size Background Image

January 3, 2011

I tried to create a new account on me.com yesterday (unsuccessfully) and noticed that Apple has set up a resizing background image on the splash page. I had never noticed this effect before and didn't know how to do it, so I dug in and whipped an example file:

variable-size-background-image.html

As an added bonus, mine works everywhere I tested - Chrome, FF, Safari, IE, Opera on Mac, Windows, iOS (including full screen mode), and Android devices.

The only wackiness I've come across so far is Google Chrome desktop on Mac (scrollbars sometimes stick) and Opera on Mac (image doesn't refresh live during resize). If anyone knows how to fix, please let me know in the comments.

View source to see what's going on. I've kept it as simple as possible for educational purposes. Cheers!