how to desaturate background image of a div using css?

Question

I saw so many plugins to desaturate an image with in the tag.

But I did not find any thing to desaturate the background Image,(An Image which is used as a background for an Element (div).

Is there a way to desaturate the background image on hover with out using 2 backgrounds (I.e. Image sprites one is B&W and the Other is Color)

I can do something like this using Image Sprites.

// Initially color Image    
$(<element>).mouseover(function(e){

                    jQuery(this).children(":first").stop().animate(
                    {
                        'background-position': <some coordinates>
                        // Coordinates of b&w Image  
                    },
                    100                       
                    );

                    e.stopPropagation();
                })
                .mouseout(function(e){

                    jQuery(this).children(":first").stop().animate(
                    {
                        'background-position': <some coordinates>
                          // Coordinates of color Image   
                    },
                    100,
                    settings.easingType
                    );

                    e.stopPropagation();
                });

But I dont want this. I want desaturate Background image on fly. Please Help.

Answer 1

Take a look at this page http://davidwalsh.name/css-filters. It explains some filter methods (webkit browsers).

Maybe you should do it better with canvas (better browser support) or best on the server itself, for example with php.

Answer 2

element: hover{
     filter:        url(~"data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
    filter: gray;
}

Here is the related Question hoping some one need a redirection.

CSS to Desaturate Background Image Only WIth Other Images in Div Stay Saturated