: How to make background image black and white? Are there any filters that would make background image black and white? I have an image set as the background image using CSS, but now I need

@Reiling115

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:
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:
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 */
}

Vote Up Vote Down

@Murray432

Have a look at this : 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%);}

Vote Up Vote Down

@Ogunnowo487

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!

Vote Up Vote Down

@Samaraweera270

An option is to use SVG filters: 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).

Vote Up Vote Down

@Chiappetta492

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

Vote Up Vote Down

@Eichhorn148

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

Vote Up Vote Down