The CSS Parallax Effect is something that is rarely used in web design but is really cool when used properly. This CSS technique utilizes absolute positioning, percentage background positioning, and z-index to create a realistic 3d scrolling background. Before we get started, let me just warn you that this effect is likely to only be effective in every browser except for Internet Explorer 6 (and lower). Since we are relying heavily on transparent .png images and absolute positioning, it's wise not to even bother to try and hack your way through.

Before we get started on a quick tutorial of how to achieve this effect, here are a few examples of the Parallax Effect in it's finest. (Note: To see the effect, resize your browser window horizontally.)

Example #1 - Dumago.net

Example #2 - Dromaeo.com

Example #3 - Sitepoint.com

It's cool, isn't it? It's very simple to achieve with only two or three absolutely-positioned divs. Here's how to make a quick example.

This will be our HTML:

<body>
	<div id="middle-bg"></div>
	<div id="front-bg"></div>
</body>

Here is our CSS:

body {
	background: url(images/back-bg.png) repeat 5% 5%;
}
#middle-bg {
	z-index: 997;
	background: url(images/middle-bg.png) repeat 20% 70%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
#front-bg {
	z-index: 998;
	background: url(images/front-bg.png) repeat 200% 110%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

That's all. You've successfully created a simple Parallax Effect in CSS. That wasn't so hard, was it?

One small detail. Since these backgrounds have a high z-index and are positioned absolutely, to have any content on top of them you'd need to make sure the containing div had a higher z-index and was also positioned absolutely.

See my example: Demo
Download my example: Download

You have to admit, this is a pretty nifty effect that I had previously never heard of before. I was enlightened about this by ViciousDuck over a chat we were having last night. Credit goes to CSS-Tricks for the original article I read to get informed on this subject.

If you liked this post, stay updated. Follow me on Twitter or subscribe to our RSS Feed via email.

March 25, 2009 -- How To: Use a jQuery Plugin to Display a Post Carousel
February 13, 2009 -- Theme in the Works: Rock Solid
February 10, 2009 -- 15 Useful Wordpress Tricks to Make Your Theme Even Better
February 4, 2009 -- 4 Extremely Useful Tools for Website Designers
August 28, 2008 -- My 3 Favorite Design-Based Blogs

Like this post? Spread it!

There are 30 comments to this post.

ViciousDuck had this to say, Feb 23, 2009 @ 4:05 pm.

Thanks for the credz...
Overall, a pretty cool post. I already knew about it, so I didn't gain anything from reading it, but whatever..

ViciousDuck´s last blog post: How to Theme Your iPod.

Germz had this to say, Feb 23, 2009 @ 5:55 pm.

I agree with the duck.
I'm sticking with good old css, no weird effects involved.

Germz´s last blog post: Top 50 Ajax Tools, Scripts & Solutions that will rock your world..

Deime had this to say, Feb 23, 2009 @ 6:23 pm.

I didn't know about this technique... I was using a jQuery plugin for that: jParallax http://webdev.stephband.info/parallax.html

Deime´s last blog post: HTML Mock-up WebApp: SpineCarver.

Eternal had this to say, Feb 23, 2009 @ 10:08 pm.

Really cool, gotta try this.

Cristhian Bedon had this to say, Feb 24, 2009 @ 11:39 am.

Nice read, but like Germz - I'll stay with the old CSS.

Cristhian Bedon´s last blog post: Logo Designer Blog.

BeyondRandom had this to say, Feb 24, 2009 @ 11:47 am.

Pretty sweet trick. Not sure if or when I will use it but still cool.

BeyondRandom´s last blog post: So GoDaddy Screwed Me Up!!.

hd-J had this to say, Feb 24, 2009 @ 3:53 pm.

Interesting! Most of my clients requiered IE6 compatible websites though, so I guess I will have to wait a bit more before to start using it!

But thanks for the tip!!

hd-J´s last blog post: How to: add a reflection effect to text.

Admin

Ralph had this to say, Feb 24, 2009 @ 4:20 pm.

Yeah, I usually am required (either by clients or my OCD) to have IE6 compatible websites too, so this is not something I'll be using in a while. I thought it was cool to post about though.

viciousDuck had this to say, Feb 24, 2009 @ 7:41 pm.

Eh, it really wouldn't be that big of a deal to include it. No one would really miss it if they were using IE.

viciousDuck´s last blog post: How to Theme Your iPod.

Benje had this to say, Feb 24, 2009 @ 10:39 pm.

Wow, that's actually a pretty cool effect.
I might use it in my website.

Thanks

shin had this to say, Feb 25, 2009 @ 1:57 am.

I wonder why it is not working with my vista? I tried IE, FF and chrome. But none of browsers don't show the effect.

Stef had this to say, Feb 25, 2009 @ 9:25 am.

Sweeeeeet trick.

...But what's the point of it?!

The visitors of your site won't be resizing their browser.

shin had this to say, Feb 25, 2009 @ 12:14 pm.

now I got it. But I toally agree with Stef. There is no point using this.

Admin

Ralph had this to say, Feb 25, 2009 @ 5:00 pm.

@Stef&Shin - Yeah, it is pointless, but its a cool trick and it helps you to understand how CSS works better.

Adeline had this to say, Feb 25, 2009 @ 9:58 pm.

Another example I spotted on CSS Tricks:
http://css-tricks.com/jquery-robot/

blogsarticle had this to say, Feb 26, 2009 @ 11:43 am.

very useful~~

blogsarticle´s last blog post: SEO Advice - How You Get Oneway and Reciprocal Backlinks.

Daniel Koskinen had this to say, Mar 27, 2009 @ 2:35 am.

The effect is pretty pointless, but probably goes down well on websites geared towards web geeks. In addition, it's not intrusive because you only notice it once you resize. I discovered it on the Silverback website, http://silverbackapp.com and instantly got this feeling that I'd "discovered" something cool.

Admin

Ralph had this to say, Mar 27, 2009 @ 6:27 am.

@Daniel - Yeah, I feel the same way. It's not that useful, but its good to know, and if used right, it can be pretty impressive.