I thought I would take the idea an explain it in a bit more detail, which a slightly different application, and offer up a download for those interested.

What is Parallax?

You can think of motion parallax as what you see when you look out of a moving train. Bushes right alongside the train tracks will zip past your view, while cattle grazing in the field will appear to move more slowly across your view and the mountains in the background will hardly move at all. Parallax has particular relevance to astronomy. Not only because sci-fi movies use the effect all the time to create cool space effects, but because this effect is how we measure how far stars are away from our own solar system.

Multiple Backgrounds with Parallax

In honor of this amazing effect and it's relevance to science, I created Starry Night. Starry night is a full-page background effect with three layers. Distant stars will only move a little bit as you resize the browser window, while closer stars will move faster. The effect is created with three page elements, all of which occupy the entire browser window. The body ("background"), a div ("midground"), and another div ("foreground").

<body>
<div id="midground"></div>
<div id="foreground"></div>
</body>

The body element will fill the entire screen by default, but we'll have to style the other two divs with absolute positioning to do the same.

Both the midground and the foreground PNG files are alpha-transparent, so they will lay on top of each other nicely. The important part here is the % values you see in the background attribute. This controls the horizontal and vertical positioning, but in the context of this example, you can read that as "how fast you want it to move". Also notice you can go beyond 100%, this means it will move at a faster rate than the rate of resizing the browser window.

It is worth mentioning at this time that this effect just ain't gonna happen in IE 6 or below. Between the bugs with PNG and the bugs with absolute positioning, it's just not worth it. In my example, I use a conditional stylesheet to display a warning message.

Where does my content go?

That'll be up to you, notice in my example page the small bit of content in the upper right. You could do something similar. Remember that any area you build to put content into will need to be absolutely positioned and have a higher z-index value. Otherwise, the absolutely positioned foreground and midground will cover up your content area and you won't be able to select or click anything (if you can see it at all).

I could be wrong but the only reason you need to use absolute positioning in this example is because you are doing the effect at the full height of the browser window, right? The Silverback site does not use images that are the full height of the browser window so there is no absolute positioning involved.

Don’t forget that you could also apply the deepest background image to the html element itself eliminating one of the divs that only holds a background image.

@chipgrafx: Partly right… it is because the elements need to be on top of one another. If you didn’t want to go full height on all of them, you could use a negative margin to push the other divs on top of one another and not need the absolute positioning.

I give this 2 thumbs up for coolness and a wavering hand for usefulness : ) – Noticed the nice IE warning but should it be &lt!–[if lt IE 7]>, lte means less than or equal to IE7, so I’m seeing the warning message in IE7 too. Regardless, it’s a good use of the conditional to display the message.

This is very cool. But my question is how many users are actually gonna resize their windows while they’re browsing through your site? Things are not so cool when you have to scroll down the page. If we can get a similar effect to work during scrolls that’d be a much more useful effect. NO?

This comment thread is closed. If you have important information to share, you can always contact me.

Treehouse is where you go to learn HTML, CSS, and how to build iOS apps. It's a complete education in modern web and app technology, designed to get you ready for a hot new job or to kickstart your own business.

The Lodge is a member login only area with access to video training on how to build websites from scratch using the best modern tools.

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.