How to remove these strange white space on the sides?-CodePudding

I'm developing web music player. I want to make blurred background for my album covers, and I got these annoying white spaces around the edges. I think that the problem is in algorithm that tries to smoothly upscale an image and gets around 0.5px of white space. But I don't know how to remove that. Do you know how to? The image:

.bg-img {
position: absolute;
top: 0;
left: 0;
background-image: url("/img/covers/cover.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;

filter: blur(5px) brightness(0.4) saturate(2);

}

My full code

CodePudding user response：

That's because of the blur. When you blur an image, it's reducing the density of that image around the blur radius. What you're seeing is the white background of the site. Unless you need the body for anything particular, you can change the background color on that to something to mask it (black, white, blue, whatever)

Edit: black actually works kind of nicely as a vignette effect if you're into that

body {
  background-color: black;
}

.bg-img {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("https://pbs.twimg.com/media/Dl59c15XsAAf6a7?format=jpg&name=240x240");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  filter: blur(5px) brightness(0.4) saturate(2);
}

<div >
</div>

CodePudding user response：

Backdrop Filter

What AStombaugh says is right.

However, to achieve what you are looking for you can create the blur in another way. Tru this:

Your html:

<div >
  <div ></div>
</div>

Your css:

.bg-img {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.blur {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px) brightness(0.4) saturate(2);
  height: 100vh;
}

Here is a fiddle with the example above.