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.