IE8, IE9 - How to make background images blur

Question

I am using Fliter:blure to make images and text blurry in my site. It is not working fine in IE so I have added Filter"progid:DXImageTransform.Microsoft.Blur(pixelradius=3) to make it working. This style is working fine for images and text added on page but it is not making background images blurry.

Does any one know how to make background images blur in IE8/9 ?

Possible duplicate: http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image — odedta, Aug 11 '15 at 06:43
This is one solution I found: http://quasimondo.com/StackBlurForCanvas/StackBlurDemo.html — odedta, Aug 11 '15 at 06:54
Indeed, no matter what I have tried nothing seems to work besides that plugin. — odedta, Aug 11 '15 at 06:55
Hi Odedta, thanks for your valuable time. I already checked that site and tired to integrate in my site. Actually, there two reasons why I could not user it. 1) I could not add Canvas in my site 2) The script give is not working for corss domain images. — Gokul Shinde, Aug 11 '15 at 09:41

score 1 · Answer 1 · answered Aug 11 '15 at 07:10

This is the most comprehensive way of doing it; add it in your CSS, and try adding the class Blur to the desired div:

.blur {
  filter: blur(5px);
  /* Someday, sigh ... */

  -webkit-filter: blur(5px);
  /* Prefixed CSS3 blur filters */

  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: url(#blur);
  /* Firefox needs SVG */

  filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius='5');
  /* IE lte 9 */

  background-image: url(http://f.cl.ly/items/1J0T0L3q1h1a0c3Q0W0I/meatloaf.jpg);
  background-repeat: repeat;
  /* Repeat for browsers that don't support background-size */

  background-position: top center;
  background-size: cover;
  display: block;
  width: 100%;
}

I hope it helps...

Mate, it doesn't actually solve the problem so it doesn't qualify as an answer. Look for yourself: http://jsfiddle.net/chorqjtz/ - In any case, you did post the best way of going about it. — odedta, Aug 12 '15 at 05:29

IE8, IE9 - How to make background images blur

1 Answers1