1

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>
Yonose
  • 13
  • 4
  • Take a look here http://stackoverflow.com/questions/12224320/defined-edges-with-css3-filter-blur – Anfuca Apr 12 '16 at 06:56

3 Answers3

2

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/

<div class="content"></div>

.content {
  overflow: auto;
  position: relative;
}
.content:before {
  content: "";
  position: fixed;
  left: -1%;
  right: -1%;
  top: -1%;
  bottom: -1%;
  z-index: -1;

  display: block;
  background-image: url(http://hdwallpaperfun.com/wp-content/uploads/2014/08/Snow-Mountain-Wallpaper-High-Definition.jpg);
  background-size: cover;
  width: 102%;
  height: 102%;

  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

ps: I also prefer to use content:before, to keep the code cleaner. personal preference, is all.

praveensewak
  • 114
  • 1
  • 6
1

You could stack a non-blurred version behind the blurred version:

.bg-img-solid{
 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;
 position: fixed;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 z-index: 1;
 padding: 0;
 margin: 0
}

.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-solid"><div class="bg-img"></div></div>
 </body>
</html>

I merely duplicated and then removed the blur from the parent div.

Scott
  • 21,475
  • 8
  • 43
  • 55
0

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.

.blurred-bg-img {
margin: -5px;
position: relative;
background-image: url(assets/background.JPG);
background-repeat: no-repeat;
background-position: top right;
background-size: cover;
padding: 350px;
filter: blur(2px);

}

ProjectBrady
  • 1