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

Links from Video:


  1. User Avatar
    Permalink to comment#

    Sehr gut! Danke! :D

  2. User Avatar
    Permalink to comment#

    Hello Chris, Thanks for this, Can you please do another video on wordpress theme once again? advance theme??

  3. User Avatar
    Permalink to comment#

    Chris this was sweet! Could you explain how they made the the Zombie/Robot image seamless on the repeat?

  4. User Avatar
    Permalink to comment#

    I’d thought you smashed your camera ;)

    Kind regards

  5. User Avatar
    Permalink to comment#

    Thanks ! Really Cool!

  6. User Avatar
    Josh E
    Permalink to comment#

    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.

  7. User Avatar
    gurukarm (@karma_musings)
    Permalink to comment#

    Totally totally cool. Thanks for laying it out. And for the download files!

  8. User Avatar
    Jarod Taylor
    Permalink to comment#

    Semantic or not, I don’t care, it was quite clever of them to do that! Good explanation, I’ll have to play with it some time.


  9. User Avatar
    Jack Franklin
    Permalink to comment#

    Great stuff Chris.

    I noticed you have the HTML Ipsum icon in your menu bar, where can I get that program from, I’ve been searching for ages and I can’t find it :(



  10. User Avatar
    Permalink to comment#

    Youre such a cool dude, thanks a lot fella!

  11. User Avatar
    Walt RIbeiro
    Permalink to comment#

    This was a cool technique. I was on the site the other day and didn’t even notice it until you Twittered it out. Very cool!

    I also like how you make the Email / name / website bars fade when you leave a comment.

  12. User Avatar
    Permalink to comment#

    This is a great explanation and the technique is really facinating. Thanks for the video!

  13. User Avatar
    Permalink to comment#

    fun! thank you!

  14. User Avatar
    Permalink to comment#

    Thanks Chris.. this is very cool.. its a “why didn’t I think of that” idea. Also I loved the “no one cares about IE6 anymore” comment, lol.

    • User Avatar
      Lon Chaney
      Permalink to comment#

      I too, liked your comment about IE6, but unfortunately some people do care…

    • User Avatar
      Chris Coyier
      Permalink to comment#

      I’m sure you all know I was just kind of joking. For IE 6, the solution is as always to create and IE 6 specific stylesheet and just set the backgrounds that use the alpha transparency to none.

      I can’t think of a more suitable punishment for IE 6 than for them not to get to see cool zombies and robots.

    • User Avatar
      Joël Cox
      Permalink to comment#

      Can’t agree more.

  15. User Avatar
    Permalink to comment#

    Awesome effect. Thanks for explaining that to us Chris!

  16. User Avatar
    Sumeet Chawla
    Permalink to comment#

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

  17. User Avatar
    Kyan Blue
    Permalink to comment#

    Awesome. I hadn’t seen the Think Geek site until I read this post, but it’s a very cool effect. ;D

    (By the way, I love your comment form.)

  18. User Avatar
    Permalink to comment#

    Would it not work the same using the page-wrap div styling on the html element thus eliminating the need for the page-wrap div? Just curious if that would work. . .

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Yeah that would probably work. I usually stay way from styling the HTML element, but it’s kind of irrational, I think it’s fine in general.

    • User Avatar
      Joseph S.
      Permalink to comment#

      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.

      You should try it. {wink wink}

  19. User Avatar
    Permalink to comment#

    That is a super cool CSS trick. I really need to find a way to put that kinda idea in my next design! THANKS CHRIS!

  20. User Avatar
    Permalink to comment#

    That’s really cool. Thanks for the explanation! Your screencasts are always really helpful. =)

  21. User Avatar
    Permalink to comment#

    Really cool man, thanks for taking the time!

  22. User Avatar
    Permalink to comment#

    Hey Chris,

    Awesome screencast and great trick! I also get a kick out of what you said at about 16:52. Sorry, very childish but hey… thats why I keep coming back!


  23. User Avatar
    Permalink to comment#

    Maybe they drew inspiration from your downloads area: http://css-tricks.com/examples/SecretMessage/

  24. User Avatar
    Guilherme Barbosa
    Permalink to comment#

    I would do this using z-index with absolute positioning. Would this work?

    Thank you!

  25. User Avatar
    Permalink to comment#

    Very neat trick!

  26. User Avatar
    Permalink to comment#

    This idea is wicked cool, thanks for sharing the idea & how to do it!

    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.

  27. User Avatar
    Permalink to comment#

    # 68.. next is…6*

  28. User Avatar
    Permalink to comment#

    This is a great screencast. Cool little trick, explained really well.

    Love your stuff Chris, and even though I see you scrapped the PSD to WP theme, I hope you get back to it. You explain stuff very clearly.

  29. User Avatar
    Brian Layman
    Permalink to comment#

    Awesome stuff, Chris.

    That’s really clever. I think I’ll see how it works with color images.

    And dude “Open Image in New Tab” right under “Copy Image Location” is your friend. :)

  30. User Avatar
    Permalink to comment#

    That was pretty sweet, I will give it a try

  31. User Avatar
    Permalink to comment#

    In my comment above I mentioned to use the images without divs whit absolute positioning and z-index. I think this would me more simple and semantic (or not).

  32. User Avatar
    Permalink to comment#

    Thanks Chris!, nice video explanation and thechnique.

  33. User Avatar
    Permalink to comment#

    I just voted for you in both categories on the 2009 .net Magazine Awards. Thanks for all of the great tips and tricks!!!

  34. User Avatar
    Joseph S.
    Permalink to comment#

    You can apply the first background to the html element, the second the the body element and avoid 1 of those wrappers.

    • User Avatar
      Joseph S.
      Permalink to comment#

      Ooops! Someone said it already… sorry.

      I scanned through to make sure someone hadn’t… but didn’t scan through well enough.

  35. User Avatar
    Permalink to comment#

    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

  36. User Avatar
    Chaunce Dolan
    Permalink to comment#

    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!

  37. User Avatar
    Permalink to comment#

    Thanks for posting this…very cool effect! I’m just getting started in web design and stuff like this really helps a lot!

    Rock On.

  38. User Avatar
    Permalink to comment#

    wow…great tut!! Easily explained and humorous =D

  39. User Avatar
    Permalink to comment#

    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.

    • User Avatar
      Permalink to comment#

      Hey mate –

      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…

  40. User Avatar
    Permalink to comment#

    Hey Chris –

    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 again mate!

  41. User Avatar
    Scott Cramer
    Permalink to comment#

    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.

    Once again, thanks for the tutorial!

  42. User Avatar
    Permalink to comment#

    The negative value in the background position is actually horizontal offset (not vertical, which is bottom); probably used to better locate the ‘BRAAAAINS’.

    Love the site Chris, especially the new snippets

  43. User Avatar
    Ben Johnson
    Permalink to comment#

    Thanks loved your screencast, this is where my imagination took me this morning

  44. User Avatar
    Permalink to comment#

    Couldn’t you do this using pseudo elements on the body?

    • User Avatar
      Chris Coyier
      Permalink to comment#

      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.

  45. User Avatar
    Permalink to comment#

    Once I saw somewhere awesome background technique and couldn’t find it now :(
    There was black background with line which moved across the page while scrolling.

    Can anyone help me to find it?

  46. User Avatar
    Problem Causer
    Permalink to comment#

    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.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.