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:)