How to remove these strange white space on the sides?

user_19366649 0
Viewed 110

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.

.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%;

    filter: blur(5px) brightness(0.4) saturate(2);
}
<div class="bg-img"><div>

css
3 Answers

Found two solutions:

  1. add solid black shadow around your image: box-shadow: 0 0 0 30px black
  2. force image to overflow on all sides (inset: -10px is equal to setting top, bottom,left and right to -10px)

body{
  overflow: hidden;
}
.bg-img {
  position: absolute;
  inset: -10px;
  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;
  filter: blur(5px) brightness(0.4) saturate(2);
}
        <div class="bg-img"></div>

user_139703970

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)

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 class="bg-img">
</div>

user_85650100

Backdrop Filter

What AStombaugh says is right.

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

Try this:

.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;
}
<div class="bg-img">
  <div class="blur"></div>
</div>

user_123485840
Related