How to make background image black and white?

Question

Are there any filters that would make a background image black and white?

I have an image set as the background image using CSS, but now I need to apply a filter so that an image is shown in black and white only. Ideally, I would also like to apply opacity to it.

The effect I am really trying to achieve is to have background image black/white and on hover over that span element the filter would be removed, revealing the color version.

And of course it has to work in Firefox, Chrome and Internet Explorer.

Answer 1

This question is missing a more current answer.

The answer is yes, now this is possible and it is well supported amongst modern browsers (though ironically not IE10+ without JavaScript). You are looking at the filter CSS property (which does a lot of other cool stuff besides black and white).

A blog post here goes into more details:

http://demosthenes.info/blog/532/Convert-Images-To-Black-And-White-With-CSS

As well as this question here on Stack Exchange which is getting some love and worth a follow by the OP:

https://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css

And finally, an actual piece of code, shamelessly robbed from the Stack Exchange answer and tested in Chrome and IE9:

.my_image_class
{ 
    filter: grayscale(100%); /* Current draft standard */
    -webkit-filter: grayscale(100%); /* New WebKit */
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); /* Not yet supported in Gecko, Opera or IE */ 
    filter: url(resources.svg#desaturate); /* Gecko */
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
}

Answer 2

For CSS only, I don't think you could achieve the rollover effect with any type of a filter. You could have 2 versions of the image, one color and one b/w, combine them as one image with each version side by side, and offset the images when the mouse hovers over it, using the a CSS sprites technique...http://www.alistapart.com/articles/sprites

Answer 3

An option is to use SVG filters: https://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css

IE has a built in filter you can use (see answers on link).

Answer 4

I don't think CSS was ever really intended for fancy graphical 'filters' though opacity seems to be a useful exception. Just swap the background image

span:hover {opacity: 1.0 ; background-image:url(someimage.png); } 

Answer 5

Have a look at http://www.pixastic.com/lib/

Answer 6

http://webdesignerwall.com/tutorials/html5-grayscale-image-hover

"This demo is intented to show you how to make a grayscale/color image hover effect with HTML5 and jQuery. To achieve this effect before HTML5, two images are required: a color and a grayscale version. Now HTML 5 made it easier and faster because the grayscale image is generated from the original source. I hope you will find this script useful in your design such as portfolio showcase, photo gallery, etc.

The jQuery code will look for the target images and generate a grayscale version. When hovering the image, it will fade the grayscale image into color."

This should help you out!

Answer 7

Have a look at this : http://sag-3.blogspot.com/2012/11/grayscale-using-css.html

This method is pure CSS and will work in all webkit based browsers.

So the code is:

HTML :

<div id="background-image" style="background:url(image.png);"></div>

CSS :

#background-image:hover{-webkit-filter: grayscale(100%);}