Grow your CSS skills. Land your dream job.

Starry Night: Incredible 3D Background Effect with Parallax

Published by Chris Coyier

starrynight.png

If you haven't seen the mysteriously cool Silverback app teaser page you should check it out. The Gorilla was designed by Jon Hicks (yep! the same site with the cool body-border technique). Make sure you resize your browser around when you visit the site to see the cool "parallax" effect of the hanging vines. The site itself was designed by Paul Annett. Paul wrote an article on Think Vitamin on how he created that parallax effect.

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.

body { 
	background: url(images/background.png) repeat 5% 5%;
}
#midground {
	background: url(images/midground.png) repeat 20% 20%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 997;
}
#foreground {
	background: url(images/foreground.png) repeat 90% 110%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 998;
}

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).

[VIEW EXAMPLE PAGE]

[DOWNLOAD EXAMPLE]
.ZIP file inclues Photoshop document for the stars.

Comments

  1. dip
    Permalink to comment#

    Cool!!!

  2. Super cool. Now all it needs is some javascript filckering stars.

    I gots me some parallex on my page now too!

  3. Permalink to comment#

    This is really CLEVER!
    It’s a shame that this superb effect only shows when resizing the page. :)

  4. 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.

    Nice experiment by the way…

  5. @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.

  6. Permalink to comment#

    If you used negative margins to achieve the overlay, and a .png hack attack on IE, this could be pretty useful. Really cool trick Chris.

  7. Ah, yes. I just noticed the divs are separate. Why not just nest the foreground div inside the midground div? That seems it would result in a little less CSS.

  8. Nice Tutorial, I read about this the other day on Vitamin, they have a pretty cool tutorial too. It is a real shame that this can’t happen without resizing the browser like Flavia said.

    Maybe some javascript could be used to slowly alter the css if it was inline?

  9. Kevin Segedi
    Permalink to comment#

    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.

  10. Permalink to comment#

    Seriously, that is sweet, and sad that it’s not for IE6. I’m going to make that happen this weekend :)

  11. Permalink to comment#

    Oka, it can work in IE6 – it needs a little javascript flavor to make it “repeat” but at the same time, it can work. I’ll try to get a working example up this weekend.

  12. David
    Permalink to comment#

    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?

  13. Permalink to comment#

    Great job.

  14. this it’s cool :)

    werde ich bestimmt einem neuen projekt mal zur anwendung bringen

  15. can we do that using gif instead of png?

  16. Permalink to comment#

    Super cool. Now all it needs is some javascript filckering stars.

  17. Super cool

  18. Permalink to comment#

    An amazing effect!
    Thank you for this tutorial – I have translated it in german (I hope this is ok?) and you’ll find it in my blog guru-20.info.

    The link to the example-download is not working – I think you have the zip-file one directory higher than linked.

    ByteBros

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

*May or may not contain any actual "CSS" or "Tricks".