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>

I tried adding margin:-10px in the CSS 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

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.

HTML

<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;
}

JSFiddle

http://jsfiddle.net/2pgdttLh/