DEV Community

loading...
Cover image for Remove White Border From Blurry Background Image

Remove White Border From Blurry Background Image

nazanin_ashrafi profile image Nazanin Ashrafi Originally published at nazanin-ashrafi.hashnode.dev ・2 min read

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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 */
}
Enter fullscreen mode Exit fullscreen mode

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/

Discussion (17)

pic
Editor guide
Collapse
oskarcodes profile image
Oskar Codes

Or set the background color to black

Collapse
nazanin_ashrafi profile image
Nazanin Ashrafi Author

Sorry I didn't get it. Are asking me how to do that? πŸ€”

Collapse
oskarcodes profile image
Oskar Codes

Instead of creating a pseudo element, there’s a much simpler way to solve the issue, which is to set the background to black.

Thread Thread
nazanin_ashrafi profile image
Nazanin Ashrafi Author

How would setting the background to black blur the image? πŸ€”

Thread Thread
oskarcodes profile image
Oskar Codes

No, you do both. Set the background to black AND set the blur filter. This way there’s no white outline.

Thread Thread
danspinola profile image
Dan Spinola

Yeah, there's a black outline instead. πŸ˜‚

Collapse
christiankozalla profile image
Christian Kozalla • Edited

Very nice, thanks!
Your featured image of the post looks pretty nice, too. How do you create these?

Collapse
nazanin_ashrafi profile image
Nazanin Ashrafi Author

Thank you Christian πŸ™πŸŒΉ
I made it with canva. It's pretty easy to use. You should definitely check it out

Collapse
christiankozalla profile image
Christian Kozalla

Nice, thanks you 🌹

Collapse
thatanjan profile image
Anjan Shomodder

Wow, Nice trick. Thanks for sharing.

Collapse
nazanin_ashrafi profile image
Nazanin Ashrafi Author

Thank you Anjan πŸ™πŸŒΉ

Collapse
afif profile image
Temani Afif

I would consider an overflowing pseudo element to achieve such effect. It would have better browser support than backdrop-filter: jsfiddle.net/ebzs25qt/

Collapse
nazanin_ashrafi profile image
Nazanin Ashrafi Author

I didn't know about that, thank you πŸ™πŸŒΉ

Collapse
ritvikdubey27 profile image
Ritvik Dubey

That's great 🀩 thanks for sharing NazπŸ™Œ

Collapse
nazanin_ashrafi profile image
Nazanin Ashrafi Author

Thank you Ritvik πŸ˜πŸ™

Collapse
akshayvarshney6 profile image
Akshay Varshney

Great tip. Thanks for writing Nazanin ☺️

Collapse
nazanin_ashrafi profile image
Nazanin Ashrafi Author

Thanks Akshay πŸ˜πŸ™ŒπŸ™Œ