NO BUG: Adding a CSS filter to an image also affects the overlay

I’m not sure if this is a bug or intended behaviour?

If I create a section, add a background image and then apply a CSS filter, eg. to make the image monochrome, if you then apply an overlay, the overlay is also monochrome.

Even if you add a container over the section and apply the overlay to that, it is still affected by the CSS filter applied to the section below.

Clearly, I can edit all of the images so they are already monochrome, but that’s time consuming and I hope unnecessary.

Am I doing something wrong or is this how it is supposed to work?

Hey @Nico_S,

I’ll mark this as a NO BUG, since this is how CSS filters work. They are applied to the whole element, including children elements.

One way to do this is to do something like this:
image

So you can set the “Blur + Background” as absolute and to 100% width so that it takes full space of the parent container, then you set a background image and filters to it.

The result will be that the background is in grayscale, but the frontend is not.

Best regards,
M

Ahh, thanks for the reply. I’ll remember this for future and try your solution.

@Nico_S,
forgot to mention that you may also try backdrop-filter property, but it’s not supported in Safari.