title: White blur around image when using CSS3 blur filter?
body: <p>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:</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>...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. <a href="https://i.stack.imgur.com/ygvhr.png" rel="nofollow noreferrer">Here is a screenshot of how this problem looks like</a>.</p>
  
  <p>Is there any way to get around this? I had a look at <a href="https://stackoverflow.com/questions/12224320/defined-edges-with-css3-filter-blur">this Stack Overflow question</a> but couldn't get it to work (partly because that example uses a <code>&lt;img&gt;</code> tag, not just a <code>&lt;html&gt;</code> 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?</p>
  
  <p>Thanks for your help and time.</p>