Grow your CSS skills. Land your dream job.

Blurry Background Effect

Published by Chris Coyier

When setting a background image on a page element with CSS, you can control its position with "background-position", but an often-forgotten trick is that you can control its position behavior with "background-attachment".

Utilizing two images, we can pull off a pretty simple and fun CSS trick I'm calling the "blurry background effect". Here are the results:

 

What you can't see in that image, is that when you move the browser window wider and narrower, that white main content area stays centered while the colored pencils stay fixed. But anywhere the white main content area covers the pencils, they appear faded and blurry, like looking through frosted glass.

The Trick

The trick is that we are using two different background images. The full, sharp bright color version is set on the body element, while the faded blurry image is set on the main content div wrap. In order to keep them positioned exactly the same in that fixed position, is to set the background-attachment property on the div to "fixed". Here is the relevent CSS:

body	 { 
  background: url(images/bg-solid.jpg) no-repeat;
}

#page-wrap { 
  background: url(images/bg-blurry.jpg) no-repeat fixed;
  width: 500px; margin: 40px auto;
}

Sometimes the simplest tricks have the the neatest results!

I was first shown this trick by Roy who pointed me to this website.

Comments

  1. Wow, what an awesome technique! I love the fact that it’s so simple and yet produces such a “complex” and interesting effect. Granted it’s simple, but I’d never think of it by myself, not in a million years!

  2. v-render
    Permalink to comment#

    wo hoo .. that was really awesome ..
    and i am luck to find here first !

  3. v-render
    Permalink to comment#

    o.. just missed first place ! :P

  4. I love simple techniques like this used to great effect. Thanks for posting this, Chris!

  5. Permalink to comment#

    Just a thought, but could you also make your bg-blurry.jpg a semi-transparent white gif? That way it would work on any image.

    • Permalink to comment#

      Semi-transparent white overlays produce a slightly different effect. Try it out for yourself and see!

    • That’s an idea, but

      1) It would have to be an alpha-transparent PNG. GIF’s don’t do alpha-transparency.

      2) It wouldn’t really “blur”, it would just “fade”.

    • Permalink to comment#

      Also would require a png hack for IE browsers

  6. xbakesx
    Permalink to comment#

    The Compex Spiral is the first example I ever saw of something like this. It’s a pretty slick way of making such a cool effect.

  7. Permalink to comment#

    Wow sweet technique

  8. Permalink to comment#

    Hi There,

    thanks for the article, its a nifty, awesome CSS effect ::) Much appreciated.

  9. Is it me or does this technique break when you have to scroll down? Too bad, cuz it’s pretty sweet.

    • Ah yes, good catch, I didn’t have enough content in there for scrolling. What you could do is just add the fixed position to the body background as well, which will keep them together.

    • Permalink to comment#

      Right, the author has done the same thing on his website, both body and page-wrap have fixed backgrounds.

  10. This is great. Thanks again Chris for your wonderful tips!
    Merry Christmas

  11. Thanks for the article, interesting stuff. Cheers!

  12. Permalink to comment#

    Looks like a riff on Complex Spiral Distorted (published 23 Feb 2002), which fixes both backgrounds in order to handle content scrolling. I wonder if that’s where the Bomb Squad folks got the idea.

    • Very likely, I’m sure. Definitely not a new idea, you were obviously rocking it before I even knew what “CSS” stood for =).

  13. erickaweb
    Permalink to comment#

    Great Christmas present, thanks!

  14. I love this effect. There’s a lot of potential here for easter eggs and hidden surprises on your site. Must experiment some more.

  15. How will this effect IE6? IE6 normally isn’t to happy about fixed elements, although its not something I do have alot of experience with, fixed position that is.

    • Permalink to comment#

      I just popped open IE 7 and it worked fine (except for the rounded corners, since Chris is using the moz-border-radius and webkit-border-radius attributes. Thanks for the tip, Chris!

    • Permalink to comment#

      IE6 has a problem with position:fixed; but I’ve never seen it have problems with with fixing background elements :-)

    • Cool and thanks for replying John :-) Its a rather interesting reply

    • I threw it into IE6, and it has the same issue that the Complex Spiral Distorted has. Possibly some JS could fix it for IE? but then it’s not so simple…

  16. A great effect, but I wish I could figure out how to achieve this with code (not the CSS directional blur) so separate images wouldn’t be required.

  17. You can do something similar to this with straight CSS:

    filter: alpha(opacity=75);
    -moz-opacity: .75;
    opacity: .75;

    It doesn’t “blur” the background, but it will make it transparent. It works in most major browsers, too. It’s not quite the same effect, but it allows for a non-image design. You can see a live example here: 175amonthman.com. Good tip; thanks!

  18. Permalink to comment#

    Thanks. This is very usefull tricks.

  19. Player
    Permalink to comment#

    wow! thanks for that simple and great trick! =)

  20. Permalink to comment#

    Looks have some problem with Opera 10 alpha, scroll down to the bottom and take a look :P

  21. trace
    Permalink to comment#

    very cool and timely
    thanks man
    /trace

  22. So simple but so effective, thanks for this mate :)

  23. Very nice! Thank you

  24. Permalink to comment#

    This example is stupid because it doesn’t work on ie6 and POPOEVER is right because it doesn’t work when you try to scroll down with Opera or Firefox.
    Try again dude…

    • yamaniac
      Permalink to comment#

      Dude! This site is called “CSS-TRICKS”… Chris here is showing us an interesting trick that we never knew about. now if you’re still using a browser thats Ie.6? . I suggest you upgrade. And anyways we all here at css tricks have completely freed ourselves from IE’s crappy browser. And if you think this neat trick is stupid? I suggest you make one yourself and show it to us.

  25. Permalink to comment#

    Good technique…Thanks

  26. eren from Turkiye
    Permalink to comment#

    i thought that is a bit diffucult but when i saw its trick i realize that it is nothing not to understand := )

  27. louis
    Permalink to comment#

    When IE6 is still the most used browser I can’t see how this effect is useful to anyone unless they want to exclude IE6 users. This does NOT work in IE6.

  28. While ago I did something similar but to simulate blurry background for dragdrop “windows” animated by JS. Check this out: Demo

    • Permalink to comment#

      Wow, looks really cool, how did you do that, i mean the drag and drop?

    • You have to save the offset between box and coursor onmousedown and then onmousemove calculate the position of the box with that offset applyed to the mouse position. To get the blurry effect you use basicly the same method as described here but with an css trick called CSS sprites calculated by JS as seen in the function dotheMoves. (Take a look at the source)

      On mouseup you have to unregister your moving function and done.
      (You can not only save the position offset but also border color etc. if you want to change that while moving)

  29. Awesome work.

  30. Permalink to comment#

    very nice !
    I follow your website by feed .

  31. It’s a nice effect but like Eric and xbakesx said it has been done before, a long time ago. I was intrigued by that Complex Spiral example, when I saw it back when I was pretty new to CSS.

  32. Luiz
    Permalink to comment#

    Nice effect.

    However your demo page doesn’t work on Google Chrome.

    The other link works great in Chrome.

    The background attachment fixed in the body tag should fix it.

  33. This looks great, the IE fix is just an htc that tells it how to handle png files. I will try it out and see how it works with my site as well.

  34. Permalink to comment#

    Nice! will have to try it out

  35. Permalink to comment#

    Dude… you get absolutely no love for that. What a lousy trick! Multiple backgorund images, plus, try making that demo page really short and scrolling. Full of holes.

    • Lucas
      Permalink to comment#

      thanks for reading the other comments and replies before posting!

  36. Permalink to comment#

    Thanks for sharing the whole thingy.

  37. Jiri Navratil
    Permalink to comment#

    Ths solution is not usable for sites with content longer that the actual height of screen. When you scroll down little bit, the blurry image have fixed position 40px from top related to actual viewport. It has to be move up by the amount of scroll amount. It can be easily done in javascript.

    The jQuery code could look like this. tested in IE 8,9, latest chrome and Firefox.

    $(document).ready(function() {
            $(window).scroll(function() {
                var diff;
                if (navigator.userAgent.indexOf('MSIE 9.') != -1)
                    diff = $('body').scrollTop();
                else if (navigator.userAgent.indexOf('MSIE 8.') != -1)
                    diff = $('html, body').scrollTop();
                else
                    diff = $(document).scrollTop();
    
                $('#page-wrap').css({
                    'background-position': "0px -" + diff + "px"
                });
            });
        });
    

    Anyway… The solution is far beyond solutions I´ve seen. Great job =)

  38. This demo was pointed out to me on the Public-fx mailing list. The desire is to create a similar effect but with only one image. This is the list message ( from last year) and it’s being discussed now in recent times in this thread and this thread.

    Here is my attempt with only one image using ‘element()’ and CSS filters. Could be much better.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".