multiple filter rule doesn't apply? - image

Question

I'm trying to use multiple filters on a background-image
body {
background-image: url('https://picsum.photos/200/300?image=0');
filter: grayscale(50%) blur(3px) brightness(10%);
}
it ignores the rule I've put in ...can't even do 1 at a time...can I not use filters on background images?

Answer 1

The filter is working fine but the background image is no more inside the body. Here you are facing a special background behavior that propagate the value of background from the body to the canvas AND it's removed from the body. In other words, your background is moved to an upper element and the filter is kept on the body.
To notice this, simply apply a background to the html element and you will disable the propagation effect thus the filter will work as expected:
body {
background-image: url('https://picsum.photos/200/300?image=0');
filter: grayscale(50%) blur(3px) brightness(10%);
height:200px; /*you need a height to see the image !*/
}
html {
background:red;
}
By the way, it's not a good solution to apply filter to whole body as it will also affect the content. If you want to filter only the image better consider a pseudo element that will be your background layer and where you can apply the filer without affecting the content:
body {
position:relative;
z-index:0;
height:200px; /*you need a height to see the image !*/
}
body:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background-image: url('https://picsum.photos/200/300?image=0');
filter: grayscale(50%) blur(3px) brightness(10%);
}

Answer 2

You can use filter property on background-image
body {
height: 100vh;
padding: 0;
display: grid;
align-content: center;
justify-content: center;
}
.module {
width: 300px;
height: 300px;
display: grid;
place-items: center;
color: #ff43ea;
position: relative;
}
.module::before {
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background-image: url(https://images.unsplash.com/photo-1494645009625-cc17363a5f20?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=bd502af39c922553e5a13624d4f44f40);
background-size: cover;
filter: grayscale(100%);
}
.module-inside {
position: relative;
font: bold 42px sans-serif;
}
<div class="module">
<div class="module-inside">
Module
</div>
</div>