Targeting Banners images ONLY with CSS gray-scale

Site URL: http://www.impelo.org.uk

Hello folks, I'm hoping you can help. I've managed to do most things I've wanted with CSS which is great. What I'd really like to do though is target specifically the header images on each page with CSS so that they can be black and white. I was hoping this would be a better way of achieving the desired effect without uploading a load of new images. The only issue is that I need 3 page header images to NOT be b&w: the pages with graphical banners on WHAT WE DO, FAQ and PROJECTS.

I've been able to target all images to this effect using:

img {
  filter: grayscale(100%);
}

But for just the header images, do I have to target a specific block or id? Would it b e a case of injecting code for each page requiring the CSS?

The password is currently impelo108!

Many thanks, and happy new year.

M

Did you remove header?

https://www.impelo.org.uk/what-we-do