CODEWITHSUNDEEP
cssimagebackgroundblur
MSajjadi
MSajjadi

Reputation: 3839

Blured background image with css

Is there anyway to blur an image with CSS, specially for backgrounds?

Upvotes: 0

Views: 4312

Answers (3)

Miia Klingstedt
Miia Klingstedt

Reputation: 19

Yes there is the way of blur images by the filter, you can read more about them here in the link. BUT they do not work properly for all browsers yet! And I didn't find a way to make them work for the background image.

Check this

Upvotes: 1

Alireza
Alireza

Reputation: 6848

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

Upvotes: 2

Starx
Starx

Reputation: 78971

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.

Upvotes: 0

Related Questions