How to remove white border from blur background image

Question

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

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

CSS, i tried adding margin:-10px but it doesn't work

.background-image {   background: no-repeat center center fixed;     background-image: url('http://www.hdpaperz.com/wallpaper/original/windows-8-wallpapers-2560x1600-2311_1.jpg') ;    background-size: cover;   display: block;   height: 100%;   left: -5px;   top:-5px;   bottom:-5px;   position: fixed;   right: -5px;   z-index: 1;   margin:0px auto;   -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;   } 

http://jsfiddle.net/maio/8wq132nd/1/

Answer 1

The simplest way to do it is by adding transform: scale(1.1). Try it here.

#overlay {  position: fixed;  left: 22.5em;  top: 3em;  height: 75%;  width: 50%;  background: url("https://s-media-cacheak0.pinimg.com/originals/ae/b4/c5/aeb4c53cab2b550187644af503a0f17e.png");  background-size: cover;  filter: blur(9px);  transform: scale(1.1);  } 

Answer 2

Up-to-date answer (2022)

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

.blurred::after {   content: "";   position: absolute;   width: 100%;   height: 100%;   backdrop-filter: blur(10px); /* apply the blur */   pointer-events: none; /* make the overlay click-through */ }  .blurred {   position: relative;   width: 500px;   height: 300px;   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; }

<div class="blurred"></div>

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