Greyscale Background Css Images

Question

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.

The only working solution is to apply

Answer 1

Here you go:

    

        this is a non-grayscale of the bg image
    
    

        this is a grayscale of the bg image
    

Tested it in FireFox, Chrome and IE. I've also attached an image to show my results of my implementation of this.

EDIT: Also, if you want the image to just toggle back and forth with jQuery, here's the page source for that...I've included the web link to jQuery and and image that's online so you should just be able to copy/paste to test it out:

    


    

        rollover this image to toggle grayscale
    

EDIT 2 (For IE10-11 Users): The solution above will not work with the changes Microsoft has made to the browser as of late, so here's an updated solution that will allow you to grayscale (or desaturate) your images.