title: Blur absolute background whilst retaining solid edges
body: <p>I have a div element inside and above all other content in the body of a HTML page. It has the ID 'background'.</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="background"&gt;&lt;/div&gt;
      &lt;!-- The rest of the page is below #background --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The reason the background has its own div and is not simply part of the body is because I have applied a few animations to the background upon load and I don't want these to be reflected on the other elements inside the body.</p>
  
  <p>The CSS for the background div looks like this:</p>
  
  <pre><code>#background {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      background: url(backgrounds/moon.png) no-repeat center center fixed;
      filter: blur(7px) brightness(0.75);
      -webkit-filter: blur(7px) brightness(0.75);
      -moz-filter: blur(7px) brightness(0.75);
      -ms-filter: blur(7px) brightness(0.75);
      -o-filter: blur(7px) brightness(0.75);
  }
  </code></pre>
  
  <p>To save confusion I have removed the animation CSS as that is not the cause of the problem.</p>
  
  <p>The result of the above HTML and CSS looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/XcZ1s.png" alt="enter image description here"></p>
  
  <p><em>(You might want to open the image in a new tab to see the edge blur clearer)</em></p>
  
  <p>Around the edge of the image you will see that where they are blurred the white background starts coming through giving it an inner-glow effect. I am trying to remove this to essentially leave the image blurred but maintain sharp edges.</p>
  
  <p>I would highly appreciate anyone helping me around this as it's been holding me back for quite some time. I am also aware there are a few other questions similar to this one, however I hope to have made the problem clearer and I am also using a different method of applying the background (absolute div).</p>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/nvUKT/" rel="nofollow noreferrer">http://jsfiddle.net/nvUKT/</a></p>