CodeinWP CodeinWP

A Stationary Logo That Changes on Page Scroll with CSS

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:

Both logos used in the tutorial

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.

41 Responses

  1. Not sure how to sell that to a prospective client when branding is a major issue.

  2. Luke says:

    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? :)

  3. f16combat says:

    It looks cool effect, but i don’t think this is very much useful for logos.

  4. Jay Tillery says:

    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.

    • Grant says:

      I think it could be great for branding. Full colour logo normally, then a watermark type to stay as the page scrolls.

    • Janne says:

      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.

  5. jessica says:

    good idea

  6. Pål Strøm says:

    Doesn’t work in Chrome, though…

  7. dlv says:

    really nice, clear and well explained !, thanks for share Louis

    adeux

  8. migrosch says:

    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

  9. Great article, and love the effect!

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

  11. Danny Foo says:

    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.

  12. Amanda Kay says:

    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!

  13. Tom says:

    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

  14. Simon says:

    I think so, Usability should influence the author.. Thanks

  15. Monty Frick says:

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

  16. BigM75 says:

    great technik, nice post

  17. Damian Muti says:

    Great post Louis; discovered your blog a few days ago. Great articles, buddy.

    Cheers from Mar del Plata, Argentina.

  18. Matt says:

    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! :-)

  19. Juegos says:

    Congratulations for your ingeniosity. Very nice.

  20. Arshad Cini says:

    Thanks for sharing Louis..i think i’m gonna use it

  21. Khlivnyuk says:

    Thanks Louis, very good stead this article!

  22. Zengi says:

    this looks really good! Thanks a lot!

  23. thetoolman says:

    Is similar to the classics complex spiral technique:

    http://meyerweb.com/eric/css/edge/complexspiral/demo.html

  24. Steve says:

    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… :/

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).