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?
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:
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.
