UPDATE: I’ve modified the article and the demo so it works exactly the same way as on the Econsultancy site. Thanks go to comments by Russell Bishop and Danny Foo who pointed out the difference.
The Econsultancy marketing blog has an interesting little effect using CSS that causes their logo to change when the page is scrolled. Visit their page and scroll down. You’ll notice the logo changes from a solid version to an outline version.
If you know CSS fairly well, or have investigated some of the sites on css Zen Garden, then you’re probably aware that this technique uses the CSS background-attachment property.
For those not so CSS-savvy, I’ll explain how this is done in this article.
First, in your graphics program you need to create two different logos, the solid version and the outline version. Here are the two mock logos I’ll be working with:
The outline logo will be placed as a fixed background on our outermost container on the page, as shown in the CSS below:
#container {
background: transparent url(images/demologo-wired.jpg) fixed no-repeat 30px 30px;
}
Notice the “fixed” background-attachment value, listed in shorthand immediately before the background-repeat value. I’ve also offset the background by 30px from the top and left, so it will line up nicely with the solid logo that overlays it.
Next, inside of our header div, we’ll place an anchor set to display: block with the solid logo set as the background image on the header that wraps the anchor:
#header {
background: #bbd5fd url(demologo.jpg) fixed no-repeat 30px 30px;
overflow: hidden;
padding: 30px 0 30px 30px;
height: 138px;
}
a#logo {
display: block;
width: 138px;
height: 138px;
float: left;
}
Again, the background is fixed, and offset by 30 pixels both on top and on the left, to match what we did with the outline logo. If we don’t “fix” the background image, then the logo will just scroll up as any item would, and the effect would be lost — even though you’d still see the same resulting outline version of the logo.
That’s pretty much all the CSS we need to create the effect. The only problem now is that when the page scrolls down, the logo is no longer clickable. We can solve this by placing a fixed positioned anchor over top of the logo inside the container div. This will add some extra markup to your code, but it’s an acceptable workaround.
Again, I emphasize that this is not an advanced CSS technique, but does open up some possibilities for creating a fixed watermark or other graphic that changes on page scroll. It should also be noted that this technique would not work on a layout that doesn’t have whitespace in the left sidebar, or else the outline logo would have to be changed to something that could be overlaid with other content without harming the user experience.
One drawback to this method is that it doesn’t work in IE6, but that can be resolved easily by correcting the background position with an IE6-only hack. All other styles and markup in the demo page are simply for layout purposes; the code that makes the effect work is shown above.
Not sure how to sell that to a prospective client when branding is a major issue.
I don’t understand what the problem would be…?
I think he means that when a brand must remain the same, like one color or style then this can cause brand awareness issues.
But I think its fab for certain projects, but not for certain things.
So one does not use it then – simple.
One note, on HD monitor the whole demo page fits on the screen, so i cant scroll anywhere.. So Im not able to try the demo in this resolution.. Can you add a bit more text? :)
Hey, Luke.
Thanks for pointing that out. I’ve added more text to hopefully accommodate larger screens.
or you could just resize your browser to a smaller size, then you’ll get the scroll bar.
just a thought.
Well, not everyone thinks with logic and reason.
lol… I just exhaled… what do I have to do next?
Louis, it’s a nice finding, and well described. Thanks! :)
It looks cool effect, but i don’t think this is very much useful for logos.
Cool idea, but not for branding. Would be cool for some other background effects, like when someone scrolls down a page of long text, maybe the background displays some hidden type or images.
I think it could be great for branding. Full colour logo normally, then a watermark type to stay as the page scrolls.
Hey, Smartypants-people:
1. It’s a rare occurrence that a logo doesn’t exist in positive and negative versions, and
2. This effect just might be usable with some other things than logos.
good idea
Doesn’t work in Chrome, though…
The econsultancy website works in Chrome.
I’m using Chrome 4 (beta) and it works fine. What version do you have? I believe I also checked it in Chrome 3 before I recently upgraded, and it was working there too.
works just fine in chrome for me.
cool idea, Louis. might try out something like it at some point.
thanks
really nice, clear and well explained !, thanks for share Louis
adeux
Truly a nice effect. But westciv did this many, many moons ago. Although they have since redesigned their website, the original tutorial is still online: http://www.westciv.com/style_master/house/tutorials/quick/rising_tide/index.html
Great article, and love the effect!
Myself and a colleague were pondering how Econsultancy had pulled off that effect, and we came up with a slightly tidier solution, using background images.
Also, the padding-bottom on #header ruins this demo, I removed it for the best results!
I’m clueless as to why people are saying that this is detremental for branding purposes. If anything, keeping the website’s logo prevelant even after scrolling down the page and past the header, is positive for branding. Strange opinion!
I’d like to see this kind of technique used in different scenarios, would be interesting to see what could be achieved!
Russell…
Keeping the logo visible at all times is a great idea, and wonderful for branding. The problem lies in the alternate versions of the logo. Manye companies have 50 page documents about how you can treat their logo, how much space should be on each side, what colors the logo should be etc. To display an alternate version just for a cool effect would probably be a tough sell.
Russell,
Yes, you’re right, the effect is not as nice with the padding on the header the way I have it. The problem is that the header looks awkward without that padding.
On Econsultancy, they’ve accomplished the effect using much more complicated markup, which I wanted to avoid.
To be honest, the effect would work much better if the entire background was the same color, including the background of the header.
Not sure if this is a bug. In Chrome, there’s a cut-off or empty space. Here’s what it looks like. :)
http://img714.imageshack.us/img714/7057/chromebug.jpg
That’s not a bug, but I’ve updated the article and the demo to comply more with the Econsultancy version. It actually didn’t bother me to see that gap there, but you’re right, it’s much better without it, so I’ve improved it. Thanks for pointing that out.
This is a really interesting technique! Not sure that I’ll be using it for the redesign of my folio, but I certainly have plans to implement this on a piece I’m building for fun =]
Thanks for explaining this as such a simple technique to use!
I really like this feature and have been wondering how it was implemented for a while. The whole econsultancy set up is impressive – a lot of websites could learn a lot from it
I think so, Usability should influence the author.. Thanks
“One drawback to this method is that it doesn’t work in IE6, but that can be resolved easily by correcting the background position with an IE6-only hack. All other styles and markup in the demo page are simply for layout purposes; the code that makes the effect work is shown above.”
Here’s a dumb question: what is the ie6 fix you speak of?
If you view the demo page and then “view source” you’ll see the CSS styles, including two that are declared using the “star html” hack (* html). Those are the styles that disable the effect in IE6.
great technik, nice post
Great post Louis; discovered your blog a few days ago. Great articles, buddy.
Cheers from Mar del Plata, Argentina.
really useful
I stumbled accross the econsultancy site the other day and wondered how they achieved that nice effect. Thanks for sharing the info. I can’t wait to use it in a web design! :-)
Congratulations for your ingeniosity. Very nice.
Thanks for sharing Louis..i think i’m gonna use it
Thanks Louis, very good stead this article!
this looks really good! Thanks a lot!
Is similar to the classics complex spiral technique:
http://meyerweb.com/eric/css/edge/complexspiral/demo.html
This is such a cool idea but how would I get this to be a boxed website instead of full width? I’m trying to wrap a 1080px container around it and make it centered but it isn’t working… :/