How to Create Greyscale Background Images with CSS

In this era of vibrant and dynamic web designs, sometimes it's necessary to incorporate a touch of subtle simplicity. One way to achieve this is by converting background images to greyscale, which can impart a classic or vintage aesthetic to a website.

Cross-Browser CSS3 Filters

The most straightforward approach to greyscale a background image is to apply the CSS3 filter grayscale:

-webkit-filter: grayscale(100%);

However, this technique only works in Chrome v.15 and Safari v.6 due to browser compatibility limitations.

Cross-Browser SVG Filter

To achieve cross-browser greyscale effects, you can utilize SVG filters:

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");

This solution works in most major browsers, including Firefox, Chrome, and Edge.

jQuery Animation

If you want to toggle the greyscale effect dynamically using JavaScript, you can employ jQuery:

$(".nongrayscale").hover(function () {
  $(this).addClass("grayscale").fadeTo(400, 1);
});
$(".grayscale").hover(function () {
  $(this).removeClass("grayscale").fadeTo(400, 1);
});

This code will add a grayscale class and fade the image when hovered over.

IE10-11 Compatibility

In Internet Explorer 10-11, the above SVG filter technique does not work. Instead, you can use a desaturation filter:

<filter xmlns="http://www.w3.org/2000/svg" id="desaturate">
  <feColorMatrix type="saturate" values="0" />
</filter>

This filter can be applied to images using the filter attribute.

By utilizing these methods, you can easily greyscale background images in CSS, adding a timeless touch to your web designs while maintaining cross-browser compatibility.