title: Grayscale CSS Background in internet explorer 10 and 11?
body: <p>Grayscale is working fine with all the browsers except ie10 and ie11.
  I have even tried <a href="https://github.com/kununu-labs/gray" rel="nofollow">this</a>. It worked well with images these are embedded in HTML code, but is not working as background image, declared in CSS.</p>
  
  <p>I have even tried:</p>
  
  <pre><code> img.grayscale:hover {
      filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale");
  }
  
  svg {
      background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
  }
  </code></pre>
  
  <p>This does not work either.</p>
  
  <p>The CSS code that I use to grayscale the background image:</p>
  
  <pre><code>#callouts{
  min-height: 219px;
  margin: 33px 0px 0px 0px;
  padding-left: 40px;
  
  background: url("/static/images/images/gs-pricing-4panel.png") no-repeat;
  
  filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); 
  
  filter: gray;
  
  -webkit-filter: grayscale(1);
  }
  </code></pre>