I’ve given my body a background-color of white. When I put a brightness filter on the body element this is what i end up with:
It’s as if its only applying the filter to certain children of body rather than to body itself.
I’m afraid your image doesn’t tell us much at all. Can you please post your code or link to a jsfiddle or codepen?
Go to any page on the internet and give it the code
body {
filter: brightness(0);
}
What I want is the equivalent look of having a black overlay (which I cant do instead for various reasons). Why is there a patchwork rather than the filter applied to whole body?
Go to this page
Read the paragraph in yellow that talks about experimental technology. If one chooses to use bleeding edge technology, one must build in fallbacks for the browsers that do not support it.
It does not seem to apply to the body background. The workaround would be to use another global container within the body to apply the filter to.
1 Like
It’s a bit annoying as I’m pretty stuck with my sites document structure.
So you can alter the css, but not the html?
If so, a pseudo element could possibly do it.
Thanks Sam. I’ll have a go at that idea 
Here is an example:-
Instead of a filter I used opacity and a black background for better browser support, but it should work with filter if you need a specific effect applied.
2 Likes
Works perfectly! Thank you
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.