background image grayscale

Question

I for background on my website I use colors and at top I have an image. I want to make this image black and white with css:

body {
    background: url('background.jpg') center top no-repeat;
    -webkit-filter: grayscale(100%);
}

but this code make whole site grayscale

I also tried to put site content to new div with style -webkit-filter: none; but it don't work neither.

Answer 1

There's another solution without using an overlay div using background-blend-mode.

This is supported among all major browsers https://caniuse.com/?search=background-blend-mode (except IE)

background-color: rgba(255,255,255,1);
background: url('background.jpg') center top no-repeat;
background-blend-mode: luminosity;