April 15, 2012
Blured background image with css
Question by MSajjadi
Is there anyway to blur an image with CSS
, specially for backgrounds?
Answer by phpGeek
Yes, there is.
You can use two different backgrounds, one with sharp color (the main picture) and another blurred picture:
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;
}
To see the detailed tutorial click here
EDIT:
For an image you can use svg filters as below:
The <feGaussianBlur>
element is used to create blur effects:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
- The id attribute of the element defines a unique name for
the filter - The blur effect is defined with the element
- The in=”SourceGraphic” part defines that the effect is created for
the entire element - The stdDeviation attribute defines the amount of the blur
- The filter attribute of the element links the element to the
“f1” filter
See here for detailed explanation
Answer by Starx
This is not possible through CSS.
You have to process the image using a server-side language and generate a blurry one and then use it in the CSS backgrounds.