How to remove white frame from blur

Question

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

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

CSS, I tried to add margin: -10px, but it does not 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 added overflow, indents and even margins, but the problem is still not resolved. So I tried to specify an image tag between the div. The problem is 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 2

The easiest way to do this is to add 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 3

 padding: 10px 10px; 

add this to your CSS to remove the white blur border at the bottom

Answer 4

If you want to remove the white border around the image, you can use the css Clip property.

Here you can read 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 added a negative margin to the container: margin: -5px

Answer 6

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

Answer 7

I noticed that the white frame comes from the background color of the body. If you set it to other colors, you will see that the color of the white border changes to the one you set.

Just do it

 body { background-color: black; //or whatever color is nearest to your blurred background } 

Answer 8

Here I settled on a function based on @Prime's answer.

For this to work, the image must be located inside a <div/> having the width and height image (explicitly set).

  function addBlur(style, radius) { return { ...style, // https://caniuse.com/#feat=css-filters filter: 'blur(${radius}px)', // Works around the white edges bug. // https://stackoverflow.com/questions/28870932/how-to-remove-white-border-from-blur-background-image width: 'calc(100% + ${2 * radius}px)', height: 'calc(100% + ${2 * radius}px)', marginLeft: '-${radius}px', marginTop: '-${radius}px' } } 

Answer 9

I use a path that corresponds to a blur radius of 2 times. So:

  element: { filter: blur(5px) outline: solid 10px }