Venkat Venkat - 5 months ago 13
HTML Question

How to remove white border from blur background image

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

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/

Comments