Blurry Background Effect
* 12/22/2008 — 67 Comments *
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.
Loading ...
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!
wo hoo .. that was really awesome ..
and i am luck to find here first !
o.. just missed first place ! :P
I love simple techniques like this used to great effect. Thanks for posting this, Chris!
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.
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”.
Also would require a png hack for IE browsers
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.
Wow sweet technique
Hi There,
thanks for the article, its a nifty, awesome CSS effect ::) Much appreciated.
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.
Right, the author has done the same thing on his website, both body and page-wrap have fixed backgrounds.
This is great. Thanks again Chris for your wonderful tips!
Merry Christmas
Thanks for the article, interesting stuff. Cheers!
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 =).
Great Christmas present, thanks!
I love this effect. There’s a lot of potential here for easter eggs and hidden surprises on your site. Must experiment some more.
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.
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!
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…
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.
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!
Thanks. This is very usefull tricks.
wow! thanks for that simple and great trick! =)
Looks have some problem with Opera 10 alpha, scroll down to the bottom and take a look :P
very cool and timely
thanks man
/trace
So simple but so effective, thanks for this mate :)
Very nice! Thank you
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…
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.
Good technique…Thanks
i thought that is a bit diffucult but when i saw its trick i realize that it is nothing not to understand := )
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.
While ago I did something similar but to simulate blurry background for dragdrop “windows” animated by JS. Check this out: Demo
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)
Awesome work.
very nice !
I follow your website by feed .
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.
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.
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.
Nice! will have to try it out
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.
thanks for reading the other comments and replies before posting!
Thanks for sharing the whole thingy.