Mike asks the CSS Guy about a scrolling trick with background images

Mike writes:

Check this out: http://econsultancy.com/reports.

Scroll up/down… whaaaaat? :) How was this done?

Answer: fixed background images. Let’s look at some examples.

Images

For the basic effect, start with two same sized images, with a slight difference. For my example, I chose this color image and made second version of it in black and white.

The images don’t have to be the same size, but that definitely makes it easier.

The markup

Each image will need it’s only container. I’ve used a header div and a content div.

<html>
  <head>
    ... 
  </head>
  <body>
    <div class="header">
      ...
    </div>
    <div class="content">
      ...
    </div>
  </body>
</html>

The CSS

Now you assign each image as the background image of each div. The positioning should always be the same, and background-attachment should be set to fixed.

...
.header {
  padding:40px 40px 40px 300px;
  background: #dbded1 url(images/cuckoo_color.jpg) no-repeat 20px 20px fixed;
}
...
.content {
  padding:10px 40px 10px 300px;
  background: transparent url(images/cuckoo_bw.jpg) no-repeat 20px 20px fixed;
}
...

I’ve kept this example basic. If your browser is wide enough by default, the two images are already seen at the same time. That’s ok just for purposes of illustration.

And knowing this can be done, there’s no reason it has be limited to just two images.

So what can be done with it?

This ‘effect’ isn’t inherently bad or annoying, but it is noticeable enough that I’d rather it exist for a reason – where the effect adds some value to the content. Otherwise, like in the case of econsultancy, it just seems like an excuse to show both the home and away jersey, as if someone couldn’t decide which logo to go with, so they came up with a way to use both.

I took a stab at it. Maybe a paper shredder web page?

Or maybe not…

If you’ve seen technique this used effectively, let me know in the comments.

Jan 14, 2009: Some readers of reddit mention that the following sites that have used fixed background images to achieve a nice effect:

  • Eric Meyer’s complexspiral demo uses fixed background images to fake transparency
  • Bryan Katzel’s We Bleed Design portfolio. (Click the ‘play’ link at the top, sit back, and enjoy).

This post was ported from an old host and CMS, so many comments were lost. Below are the comments that I found were most helpful regarding this post that I salvaged. Some links or attributions may not be working correctly.


It’s been used for years here: http://timpelen.com/?car=jalpa

This was also done to great effect in the CSS Zen Garden:

http://www.csszengarden.com/?cssfile=http://www.css-praxis.de/cssocean/zenocean.css

This article was ported from an older CMS, and comments were purposefully lost in the migration. If some were found most relevant, I pasted them to the bottom of that post. No new comments are accepted on these older articles.

One Response to Mike asks the CSS Guy about a scrolling trick with background images

  1. Pingback: Invert/change logo on scroll - Programmers Goodies