#68: Think Geek Background Fade Technique

This video demonstrates the technique seen on the Think Geek 3.0 site. The bottom of the site has a design of a bunch of robots and as the screen is scrolled to the bottom, the color fades to black and the pattern turns into zombies. We recreate this from scratch with their graphics, and then flop them out for our own.

This was really cool Chris! I wondered where you got the negative value for the robots image offset off the bottom. Was that the height of the image? I just don’t understand why that works on monitors of different resolutions.

Oh I missed out on this post.. good thing am following you on twitter lol… Awesome trick! I love the way you have innovated using backgrounds… am gonna try it on my own first and if I fail :( then am gonna watch your screen cast… ooo this is gonna be fun :D thanks… wish me luck ;)

Are there any reasons for that? I don’t think there are any compatability issues with styling the html element. IMHO, it makes perfect sense to put the background on the html and then have the body be a content container.

I think I might use jQuery to hide some of the extra markup (which you showed how to in an older screen cast), and add this sweet fluff with some other stuff to my design enhancements of my new portfolio which is in the works.

i like the new comments form…… idk how new it is but any ways i noticed on twitter u said u made another wordpress screen cast and wasnt sure u where gonna post it. I would like to see another wp screen cast maybe a little more advanced

Awesome tutorial, and fairly simple. My developer friends and I had noticed the update to ThinkGeek’s background last week too and were dissecting the design to figure it out, when I got a tweet about your post. Thanks for taking the time to put this together!

Exporting transparent PNGs from Photoshop gives me problems trying to get the same colour as my actual body bg (in order to hide the elements until scrolled to the bottom) – any ideas? Transparent gifs export fine, but PNG 24 is not the same colour.

I had a bit of trouble at first, and then I decided to go real simple. I used standard web colors (#000 fade to #666) and then it was much easier to get it to match up on the export. Don’t really know if that’s exactly the problem you were having, but it’s how I fixed mine…

Mad props for this one. I hadn’t ever seen that effect before until you pointed it out, and it really is phenomenally simple! I’m in the process of putting on my design site, a simple night to day bit with suns and crescent moons and it’s getting to look quite nice.

Thanks for the great info! Much appreciated. Question, however. What if you want the image fade/change to happen quicker? i.e., Instead of the user scrolling all the way down the page, having the complete switch occur only a third of the way scrolled down the page. My main WordPress site page is very long and I do not expect users scroll down to the bottom much. Individual post pages have a different problem in that they are shorter and users don’t need to scroll all the way to the bottom so once again the complete image fade/change probably won’t be seen.

Probably. It’s been a while since I’ve looked at this tutorial but in general, the <body> element is a perfectly valid element to use the :before and :after pseudo elements on which could be the extra ‘canvases’ you need to get this effect done.

I really like your content, Chris. This is a very helpful site and community you’ve created here. But one suggestion: take some GasX or something before you start making videos. Every single one is filled with you burping under your breath and it’s kind of gross. I feel like I can smell a meatball sub emanating from my speakers.

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.