Reputation: 3625

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>

I tried adding margin:-10px in the CSS 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/

Upvotes: 35

Answers (11)

Lasha

Reputation: 1

i think adding outline can solve this issue, in my case it did

.background-blur {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 1;
filter: blur(50px);
background-color: rgba(255, 0, 0, 0.2);
outline: 80px solid black;}

Upvotes: 0

D D

Reputation: 37

If the white borders are caused by the background color of the body, apply margin: 0; on body since margins are not 0 by default;

Upvotes: -1

RAJ

Reputation: 552

padding: 10px 10px;

Add this in your CSS to remove the white blur border for bottom.

Upvotes: -2

catamphetamine

Reputation: 4761

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

In order for it to work the image must be positioned inside a <div/> having the width and height of the 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`
  }
}

Upvotes: 0

XYZER

Reputation: 23

Use a SVG-Blur filter.

filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='4' result='b'/%3E%3CfeMorphology operator='dilate' radius='4'/%3E %3CfeMerge%3E%3CfeMergeNode/%3E%3CfeMergeNode in='b'/%3E%3C/feMerge%3E%3C/filter%3E %3C/svg%3E#a");

"stdDeviation" is your intensity.

source

Upvotes: 2

killovv

Reputation: 111

The blur adds transparency around the edges, so all you need to do is remove the alpha channel.

Here are a couple of examples of how to do this with SVG filters.

<filter id="omega">
  <feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0 1" />
</filter>

<filter id="omega">
  <feComponentTransfer>
    <feFuncA type="linear" slope="10" />
  </feComponentTransfer>
</filter>

You can implement blur immediately in the SVG filter, or add a filter to remove transparency after the blur

filter: blur(50px) url(#omega);

or pure CSS

filter: blur(50px) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="a"><feComponentTransfer><feFuncA type="linear" slope="10"/></feComponentTransfer></filter>#a');

Upvotes: 3

Prime

Reputation: 3625

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.

HTML

<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;
}

JSFiddle

http://jsfiddle.net/2pgdttLh/

Upvotes: 10

Moaaz

Reputation: 800

The simplest way to do it is by adding 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);
}

Upvotes: 68

W4G1

Reputation: 1694

Up-to-date answer (2024)

You can achieve this effect with just css by using backdrop-filter on an overlaying element.

.blurred::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px); /* apply the blur */
  pointer-events: none; /* make the overlay click-through */
}

.blurred {
  position: relative;
  width: 500px;
  height: 300px;
  background: no-repeat center center;
  background-image: url('https://besthqwallpapers.com/Uploads/26-5-2019/94041/thumb2-tesla-model-x-2019-exterior-front-view-new-gray-model-x.jpg');
  background-size: cover;
}