CSS Background Image Blur without blurry edges
Trying to get rid of the blurry edges when using filter:blur() on a background image.
- Back to overview
- 3 July 2014
1 minute read
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.
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.
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.
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
Check out this codepen for the final markup and css.
Hope I could help some of you.