How to remove white border from blur background image

Question

How to remove the white blur border from the background image.

CSS, i tried adding marg

Answer 1

This worked for me: Added two fixed images, one with z=-1, other with z=0, blurred the first one.

Answer 2

I added a negative margin to the container: margin: -5px

Answer 3

If the white borders are caused by the background color of the body, apply margin: 0; on body since margins are not 0 by default;

Answer 4

If you want to remove white border around picture you can use css Clip property.

You can read more here

http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

http://demosthenes.info/blog/534/Cross-browser-Image-Blur-with-CSS

Answer 5

I have added overflow, padding and even margin, but still the problem not solved. So i tried to give the image tag between div. Problem solved.

<div class="background-image">
<img src="http://www.hdpaperz.com/wallpaper/original/windows-8-wallpapers-2560x1600-2311_1.jpg" width="100%" height="100%"/>
</div>

css

 .background-image {
  background: no-repeat center center fixed; 
  background-size: cover;
  display: block;
  left: -5px;
  top:-5px;
  bottom:-5px;
  position: fixed;
  right: -5px;
  z-index: 1;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  margin:-5px;

 }

js fiddle

http://jsfiddle.net/2pgdttLh/

Answer 6

Up-to-date answer (March 2020)

You can achieve this effect with just css by using backdrop-filter on an overlaying element.

 .background-image::before {
  content: "";
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(5px); /* apply the blur */
  backdrop-filter: blur(5px);         /* apply the blur */
  pointer-events: none; /* make the pseudo class click-through */
}

.background-image {
  position: relative;
  width: 710px;
  height: 444px;
  background: no-repeat center center;
  background-image: url('https://besthqwallpapers.com/Uploads/26-5-2019/94041/thumb2-tesla-model-x-2019-exterior-front-view-new-gray-model-x.jpg');
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
 }

<div class="background-image"></div>

Keep in mind that this is not supported in IE and it only works in firefox if it is explicitly enabled.