Question

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

Answer 1

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