CSS trick for a scrolling transparent background effect
Over the weekend I was doing a bit of shopping online (well, more browsing than shopping) when I came across the Think Geek website. They have a great CSS trick for a scrolling background effect and, being the geek that I am, I couldn’t help but dissect the markup and CSS to see how they did it.
Here’s the demo of my version of the effect. Scroll the page to watch the battle between good and evil take shape.
How it works
The effect requires two images:
- One transparent PNG
The image should have two sets of graphics: what you want to show before scrolling and what appears after a visitor scrolls to the end of the page. Each group should be a different color. The transparent PNG from the demo is below.
- One gradient image to tile
The trick is to use the two colors from the transparent PNG to create the gradient.
The gradient scrolls under the transparent PNG. Because it matches the colors in the PNG, each set of images disappears depending on which part of the gradient they’re over.
The XHTML and CSS
You need both a wrapper div and a container div for your content. Here’s a simplified version of the XHTML:
<html>
<head>
<title>Background Transparency Trick</title>
</head>
<body>
<div id="wrapper">
<div id="container">
</div>
</div>
</body>
</html>
The CSS for the body tag looks like this:
body {
margin: 0;
padding: 0;
background: #900 url(gradient-tile.jpg) repeat-x bottom left;
}
All margins and padding are set to zero so the page extends to the edges of the window. The background shorthand property is used to:
- Set a background color of #900 to match the red color at the top of the gradient image,
- Attach the gradient image to the bottom left of the body element so it appears at the bottom of the web page, and
- Tile the image horizontally with “repeat-x”.
Here are the style declarations for the wrapper div:
#wrapper {
width: 100%;
background: url(transparency.png) repeat-x center bottom;
background-attachment: fixed;
}
The width of the wrapper is set to 100% so the transparent PNG appears over the full width of the browser window. The background shorthand property is used again to attach the PNG to the center bottom of the wrapper and tile it horizontally. (The PNG is attached to the center so the image doesn’t shift to the left or right when the window is resized.) The last declaration makes sure the tiled PNG sticks to the bottom of the window even when the page is scrolled.
Finally, here are the styles for the container div:
#container {
width: 750px;
margin: 0 auto;
background-color: #000;
}
The width of the container can be whatever you want for your content, preferably 960px. I made it smaller here so you can see the completed effect more clearly. The background color, too, can be whatever you want. The left and right margins are set to “auto” to center the container in the browser.
And that’s all it takes for the trick to work, with a few catches…
Some Caveats
If you don’t have enough content in the container div to make it scrollable, the gradient tile won’t reach the bottom of the window and you’ll see a block of the background color. The solution is to set a minimum height on the container div to force scrolling regardless of the amount of content.
Of course, that draws attention to the elephant in the room.
Fixes for Internet Explorer 6
This trick doesn’t work in Internet Explorer 6. You can use the AlphaImageLoader filter to display transparent PNG’s in IE6. BUT in order for the filter to work, the background image can’t be positioned or repeated. In addition, IE6 doesn’t apply fixed background positioning for any element other than the body tag unless you want to work with complicated expressions or javascript.
The simple solution? Use the Tan Hack to turn off the transparent PNG in IE6, like this:
* html #wrapper {background-image: none;}
Visitors with IE6 will still be able to see the scrolling gradient tile, just without the nifty transparency effect.
Don’t forget that IE6 doesn’t support minimum height either. If you want to force scrolling to avoid the solid block of color on short pages, you can use the Tan Hack to declare a height for the container div. IE6 treats the height property as minimum height.
View the source code of the demo to see the finished markup, including the CSS hacks for IE6.
About Jason Garrison
Jason is a freelance web designer and developer who has a healthy obsession with web standards. When he’s not knee-deep in code, you can find him in a meditative state communing with the universe.
9 Comments
Cool trick! :)
Reminded me of something similar that I’ve seen recentlty twitted by @codepo8… right, the http://www.thinkgeek.com/ website! :)
You’ve explained the CSS behind the magic pretty well… thanks! :)
Interesting effect, thank you for sharing! I think it is the bain of a web designers life to dissect interesting things we see on other sites. All part of the constant learning required so it is a good thing.
Very awesome css effect! Hats off to you for your hard word.
Holy CREEEEEAP, that’s awesome! So simple, yet cool beyond words.
Need another CSS trick to deconstruct? Check out the background here: http://silverbackapp.com/
Now, move the edge of the browser and change the window size — it creates a false perspective… heh, not as cool as your trick, though.
Very cool, I’ve been meaning to look into this and anxious for a site I can implement it on…although I think it would only ever be appreciated by us designers.
Nice :) look @ this wonderful implementation:
http://www.webleeddesign.com
wow, very cool effect, thanks for the tips
Thank you for sharing this trick. Kudos and very cool effect! I have come across your site several times – always led to a great post. Thank you and look forward to regular visits
Very nice effect Jason. Thanks for sharing this to the Design Informer news feed.
I was actually thinking of doing something similar to the header of the Design Informer.
By the way, I really love the way you have this comment section set up. It looks awesome, I love the live typing!