Blurry Background Effect

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.

  1. September 1, 2010 at 3:49 pm

    Hello. Very interesting site and you lead a very interesting discussion. There is a nice atmosphere here and I’m sure I will often read your posts.
    From time to time I will also try to write something interesting.

    Gry platformowe Darmowe Gry

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: