So im getting this issue where the picture is fading on the edges. The reason they fade on the edges is because of the filter blur. (i need the blur filter)
Any suggestions how i get rid of the fade or is it another way to do the blur effect in css, or do i have to do it in photoshop?
.bg-img{
background: url("http://hdwallpaperfun.com/wp-content/uploads/2014/08/Snow-Mountain-Wallpaper-High-Definition.jpg") no-repeat center center fixed;
background-size: cover;
display: block;
filter: blur(5px);
-webkit-filter: blur(5px);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
padding: 0;
margin: 0
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="framside.css">
</head>
<body>
<div class="bg-img"></div>
</body>
</html>
3
Answers
You could stack a non-blurred version behind the blurred version:
I merely duplicated and then removed the blur from the parent div.
You can also offset top, right, bottom, left with negative %. And then add the offset as % to the width and height. This, of course, assuming you are not too concerned with cropping the image slightly.
e.g. https://jsfiddle.net/mwzddfs6/
ps: I also prefer to use content:before, to keep the code cleaner. personal preference, is all.
I simply fixed this issue by setting a negative Margin, this allowed me the image to grow in size and remove the blurred lines around the background image.
}