White blur around image when using CSS3 blur filter?
blur, css, filter
Solution
If it's a possibility for you, a good workaround that I found is to make the image larger than the containing `<div>`, and also to clip the edges with an `overflow: hidden`.
In your case, because it's the whole `<html>` tag, I'd put the image in a `<div>` with the following CSS:
position: fixed;
top: 0;
left: 0;
transform: scale(1.02); // or whatever scale amount removes the border
This always works for me.
Problem
Today I though I'd redesign my website and approach it from a different way. Instead of focusing on typography I though I'd just add a big image and little text. I simply done: ``` html { background: url(../img/background.png) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; filter: blur(10px); -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); } ``` ...however when I see it in the browser (Chrome Version 26.0.1386.0 dev, running on Ubuntu 12.10), the image IS blurred but a faded white frame is also present. Here is a screenshot of how this problem looks like. Is there any way to get around this? I had a look at this Stack Overflow question but couldn't get it to work (partly because that example uses a `<img>` tag, not just a `<html>` one). That white frame just doesn't look good aesthetically. And no, the image doesn't have a white frame (it's simply a screenshot of my desktop, with couple of windows open, so no white frame present). Any ideas why this happens? Thanks for your help and time.