CSS Background Image Blur without blurry edges

Trying to get rid of the blurry edges when using filter:blur() on a background image.

Using filter: blur(2px) on a background image that is set to be the cover image of the whole page, can will result in ugly edges.

I tried to get rid of them with various techniques.

Negative absolute positioning

The parent wrapper has overflow: hidden so anything inside it even when over 100% should not make the viewport wider.

Using negative top|bottom|left|right: -1% values and increased the width|height: 102% moved the background image to the right position. But the blurry edges still were there. Damn.

Negative margin

Setting a negative margin: -2% had no effect either.

Clipping the image

Some people did suggest using clip:rect(). What does work when using an img with known dimensions. But unfortunately clip:rect() does not support percentage values, which we would need to crop a full size background image with unknown width/height.

Solution

Enough talking what didn't work - here is what did:

Simply scaling the background image to 110% by using transform: scale(1.1) makes the background image heigher and wider. Blurry edges gone. Perfect.

But don't forget the vendor prefixes for transform: scale

Check out this codepen for the final markup and css.

See the Pen CSS Background Image Blur without blurry edges by Volker Otto (@l4ci) on CodePen.

Hope I could help some of you.