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).
Comments (45)
Alex Dickson said:
Interesting! IIRC it doesn't work in ie6 but.
# January 13, 2009 5:22 PM
Ignacio Ricci said:
Cool. Never thought of this technique :D
# January 13, 2009 6:26 PM
Jonathan Hall said:
way cool! love the "whaaaaat?" part
# January 13, 2009 8:25 PM
Dave said:
Very cool technique! Thank you!
# January 13, 2009 10:18 PM
Benn said:
That's very very cool, elegant, and clever. Thanks for sharing that with us. I particularly enjoyed your paper shredder example.
# January 13, 2009 10:49 PM
Simay said:
Cool, I love it !
# January 14, 2009 4:36 AM
Aksquisite said:
TOTALLY AWESOME!!!!!!!!!! yet so simple!!
# January 14, 2009 7:38 AM
Simon Green said:
That's genious! Count on that showing up in some of our code ;)
# January 14, 2009 8:58 AM
Arve said:
It's been used for years here: http://timpelen.com/?car=jalpa
# January 14, 2009 11:31 AM
Vince said:
Seriously, I would of never thought of this! Thanks for showing something that would be fun to use in a future project!
# January 14, 2009 11:49 AM
Brenelz said:
Definitely a neat trick!
# January 14, 2009 11:55 AM
Luca said:
Nice tecnique! Never thought about this! Thank you for sharing
# January 14, 2009 4:03 PM
nightS said:
Great trick and effect!! Thanks for sharing
# January 14, 2009 4:14 PM
Tetsuo said:
Just when you think you've seen it all...
Brilliant trick, this.
# January 14, 2009 4:50 PM
Antonio said:
It's a great effect, I've never seen something like that, but is very simple. AWESOME! :)
# January 14, 2009 6:39 PM
Eric said:
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
# January 14, 2009 8:22 PM
anoop said:
nice trick,thnx for sharing :)
# January 14, 2009 11:04 PM
Mediopirzel said:
If you have problems with ie6, you can use ie7.js.
This script fixes the background attachment (fixed) and other css stuff in ie6.
# January 15, 2009 3:30 AM
David Horn said:
nice - thought we'd seen it all, but this is definitely an interesting effect!
# January 15, 2009 3:45 AM
Mike Rouse said:
We did an interesting implementation of this on our website along with some jQuery slider effects. When people navigate our tabs along the top the page slides to the next pane, but there's two images there - one in blue and one in pink. As the pane slides the box on the right-hand-side of the pane seems to act like a window onto the second background image and thus improves the overall effect of the scroll.
# January 15, 2009 4:03 AM
Eric from springleap.com said:
Thanks CSS Guy. Neat Trick
# January 15, 2009 4:30 AM
Graphic Design said:
Thanks alot for the great post i really learn t something good.
# January 15, 2009 8:37 AM
Timothy said:
Wow. Really cool! I love the paper shredder. I think I may use something like this in an upcoming design.
# January 15, 2009 8:45 AM
Amber Wallace said:
This is great, thank you! I love the real world examples in the comments as well -- the CSS Zen Garden implementation with the diver is fun, and this gives us all some great ideas for future projects!
# January 15, 2009 11:57 AM
jive said:
Good idea, its amazing how many tricks are still coming out on a daily basis like this.
# January 15, 2009 12:47 PM
Ben said:
Great article. I really like Westciv's use of this technique.
# January 15, 2009 2:32 PM
Julien said:
Your last example is very ingenious ! I've used this effect in the link on my "Name" ;)
# January 15, 2009 2:42 PM
Dennison Uy said:
Complex Spiral and We Bleed Design are classic. Nice to see an actual tutorial illustrating how this can be done. I believe Westciv was the original and econsult merely copied.
# January 16, 2009 6:09 AM
Francois Jordaan said:
Econsultancy designer here. Firstly, credit where it's due: I didn't invent the effect, but got the idea from Westciv's site. When Econsultancy re-branded, the brand guidelines included both variants of the logo, which can be used interchangeably. That made me think this effect would work very well for them, especially given the photographic header and clean page design we had in mind.
The first commenter mentioned IE6. Indeed, you can't get exactly the same effect in IE6 without the IE7 script. But it degrades fine to a logo that scrolls off-screen as normal. One thing I really like about this technique is the simple HTML and robust CSS it relies on. Nothing over-complicated or hacky.
Thanks for the mention! I also enjoyed the other examples.
# January 16, 2009 6:11 AM
CSS Guy said:
@Everyone:
Thanks for commenting. I'm surprised, too, at how something so simple can be so captivating.
@Francois Jordaan:
Great to hear from you. It's always a good read to hear the story behind design decisions, so I appreciate you letting us know about what inspired it.
# January 16, 2009 1:53 PM
Soh said:
Wow this is sweeeeeet. Thanks!!
# January 16, 2009 4:15 PM
EntityDesigns said:
Does this remind anyone else of the pens you tilt and the ladys clothes come off? Or is it just me?
# January 16, 2009 6:09 PM
Dainis Graveris said:
wow, when I looked at example - I was really surprised, great code and technique!
# January 18, 2009 4:53 PM
Mike Cherim said:
Clever and creative. Me likey. :)
# January 20, 2009 5:01 PM
Eddie Thieda said:
It's not always what you do but how you do it! :)
# January 22, 2009 4:45 AM
Emre Sumer said:
That's simple and have a good affect...
# January 23, 2009 3:53 AM
michelangelo said:
I wonder if it could be combined with an alpha-transparency vertical gradient image to fake a cross-fade.
# January 26, 2009 2:48 PM
CSS Guy said:
@michelangelo:
Yep, that's what the Ocean Diver CSS Zen Garden entry did.
Zen Ocean.
Here are more details about it:
Props to the CSS Zen Ocean Diver Effect (Ask the CSS Guy).
# January 26, 2009 3:51 PM
CSS Noob said:
Thanks for article. Can we make use of this technique to show "Page 1", "Page 2" etc. on a long web page? Can we dynamically calculate and enter the page numbers in a web page some how? Any thoughts? Again, thanks for the article.
# March 26, 2009 2:19 PM
arthur said:
This is a very simple and unique idea.
There were quite a few issues had on a 1920x1200 resolution, I had to minimize my window several times to see the examples! This may be something to not when developing.
# May 14, 2009 8:53 PM
Andrea said:
I am wondering if it's possible to make the fixed object be located somewhere other than the left, center or right sides. I have my page in a wrapper that is centered and the fixed image I want to use is on the left side. It is getting cutoff by the edge of the page. If you want to see what I mean, you can visit my site (it's a work in progress - I'm finishing up an online web design program where I am building my portfolio, so I know it's rough).
http://andreabaumgartner.com/portfolio.php
# June 10, 2009 10:22 PM
Jeni said:
i was wondering if there was anyway to make this work scrolling horizontally??? i know why all of the obvious tries won't work. i'm just trying to make my menu bar stay on the left hand side while scrolling through images. maybe there's an overlay type thing i can do??? i don't use css too much so i'm not really sure about all of my options. thanks
# August 11, 2009 9:49 PM
Bake said:
I can't get it to work when I try my own code and images....
# November 9, 2009 2:49 PM
Bake said:
Correction...I can only get the bottom image to show...not the top.....and my image names, locations are correct....I'm using IE7 so I don't know if that matters or not.
# November 9, 2009 2:52 PM
brent Lagerman said:
this is so awesome, I can't wait to use it on a site! Thanks for the tutorial.
brent
@
mimoYmima.com
# November 10, 2009 11:56 PM