Photoshop Question posted in
The official user guide can be found here.

CSS – Remove background faded edges – Photoshop

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>
Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 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);

    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search