I’ve got an element with this css. It works great, but I want to blur the image that is set to cover. I can’t find a way to apply filters to just one background image. I realize I could probably set it up with ::before or ::after, but I was really hoping there was a clean solution to make it part of the css one-liner here. I did some research, but didn’t find any information about this. Is there some fancy css wizardry nowadays that can do this?
background: url($img) center/contain no-repeat, url($img) center/cover;
I’m hoping to be able to do something like this:
background: url($img) center/contain no-repeat, url($img) center/cover blur(20px);
>Solution :
What you want can be done like below using filter()
background:
url($img) center/contain no-repeat,
filter(url($img), blur(20px)) center/cover;
But no browser support for this right now: https://caniuse.com/css-filter-function