Apply grayscale filter to div

Question

Trying to apply a grayscale filter to the div that is over top of the main background. Wondering if this is possible at all with jQuery, CSS3, or HTML5. I was playing with a few of the new CSS3/HTML5 technologies but to no success.

I can't save it as two images because the background needs to stretch full-size, so it won't be exactly the same on every screen.

I'm working on an early draft and I am just wondering if I should kill this idea. If you point me in the right direction I can figure it out.

Answer 1

You can use CSS filters:

#mydiv{
    -webkit-filter: grayscale(1);
}

Keep in mind that this works on Chrome and Safari at the moment.

More info: http://caniuse.com/#feat=css-filters