I was half way through writing about another topic but then got stuck with fixing the white border.
So I was like okay change of plans!
Now let's talk about the annoying white border!
If you create a blurry background image this will happen :
You see those white edges?
In this article I'll show you how to get rid of them
- First create a simple background image
.blurry-bg {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.63), rgba(0, 0, 0, 0.623)), url(img/000333.jpg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
You could add filter: blur();
but it'll add white edges, like the first pic that I showed you.
So in order to get rid of them We need to use pseudo element and give it backdrop-filter
.blurry-bg::before {
content: "";
position: absolute;
width: 100%;
height: 100vh;
backdrop-filter: blur(5px);
}
We have successfully managed to get rid of that annoying blurry border.
But let's say you want to add something in front your image , there is a little trick for that, which I'll talk about it in my next week's article . So stay tuned!
Someone just pointed out another way of doing this trick and it has better browser support than backdrop-filter
So instead of setting a background image for blurry-bg , we could just set it for its pseudo element and then give it filter: blur();
.blurry-bg::before {
content: "";
background-image: linear-gradient(rgba(0, 0, 0, 0.63), rgba(0, 0, 0, 0.623)),
url(img/000333.jpg);
position: fixed;
background-attachment: scroll;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
top: 0;
left: 0;
right: 0;
bottom: 0;
filter: blur(5px);
margin: -10px; /* this will do the trick */
}
PS. if you use this second trick, you can easily add texts and image in front of your background.
Credit to this guy :
I would consider an overflowing pseudo element to achieve such effect. It would have better browser support than backdrop-filter: jsfiddle.net/ebzs25qt/
Top comments (18)
Or set the background color to black
Sorry I didn't get it. Are asking me how to do that? 🤔
Instead of creating a pseudo element, there’s a much simpler way to solve the issue, which is to set the background to black.
How would setting the background to black blur the image? 🤔
No, you do both. Set the background to black AND set the blur filter. This way there’s no white outline.
Yeah, there's a black outline instead. 😂
😂😂😂😂😂
Very nice, thanks!
Your featured image of the post looks pretty nice, too. How do you create these?
Thank you Christian 🙏🌹
I made it with canva. It's pretty easy to use. You should definitely check it out
Nice, thanks you 🌹
Great tip. Thanks for writing Nazanin ☺️
Thanks Akshay 😍🙌🙌
That's great 🤩 thanks for sharing Naz🙌
Thank you Ritvik 😍🙏
I would consider an overflowing pseudo element to achieve such effect. It would have better browser support than backdrop-filter: jsfiddle.net/ebzs25qt/
I didn't know about that, thank you 🙏🌹
Thank you Anjan 🙏🌹
thank you but there are a issue
if value of backdrop filter increse to 200 the, pseudo element borders be fade
englisim ziad khob nist, bepazir azma:)