title: Greyscale Background Css Images
body: <p>I've searched a lot on the web but I cannot find a cross browser solution to fade a css backgrund image to greyscale and back.</p>
  
  <p>The only working solution is to apply CSS3 filter greyscale:</p>
  
  <pre><code>-webkit-filter: grayscale(100%);
  </code></pre>
  
  <p>but this works just with Chrome v.15+ and Safari v.6+
  (as you can see here: <a href="http://css3.bradshawenterprises.com/filters/" rel="noreferrer">http://css3.bradshawenterprises.com/filters/</a>)</p>
  
  <p>Many pages online speaks about this solution to grey out elements:</p>
  
  <pre><code>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"); /* Firefox 10+, Firefox on Android */
  filter: gray; /* IE6-9 */
  </code></pre>
  
  <p>(as you can see here:<a href="http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html" rel="noreferrer">http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html</a>)</p>
  
  <p>But actually it does not seem to work for css background images, as the webkit filter do.</p>
  
  <p>Are there any solution (maybe with jquery?) to hack this lack of support for filter on less advanced browsers?</p>