HTML and CSS : Blur background for div tags

This effect began being popular amongst blogger. In order to apply it, you don't need any kind of advanced photoshop knowledge or CSS, instead, all you need is patience

We will require a background image and another one with blur applied to it. You will need a picture editing program ( i personally prefer Gimp - its freewere and you find it right away after googlin it ). aside gimp, all we require is pure HTML and some css settings :=)

We will apply the CSS style so that the background will overlap perfectly with the blur even when the page gets bigger or it requires scroll. The purpose of this tutorial is to obtain an effect as following :

In order to keep the image in its place and avoid it overlapping over the blur when you scroll down the page, you have to apply "background-attachment:fixed". This feature enables the whold blur effect.

We will also apply "float:left" in order to avoid the divs flying out the frame if the resolution is smaller then expected.

The following code will be applied :

* { margin: 0; padding: 0; }
body { font: 15px "Times New Roman", Times, serif ;
background: url(images/background.jpg) no-repeat fixed; }

.blur-class {

width: 450px;
margin:15px 15px 15px 15px;
background: url(images/background-blur.jpg) no-repeat fixed;
border: 2px #ffffff solid;
padding: 25px 0 0 0;
min-height: 159px;
float:left;

}