title: CSS blur and retain sharp edges using absolute div
body: <p>This works just fine if img is not set to absolute:</p>
  
  <pre><code>div img {
      filter: blur(5px);
          -webkit-filter: blur(5px);
          -moz-filter: blur(5px);
          -o-filter: blur(5px);
          -ms-filter: blur(5px);
      margin: -5px -10px -10px -5px;
  }
  div {
      margin: 20px;
      overflow: hidden;
  }
  </code></pre>
  
  <p>Example working fine: <a href="http://jsfiddle.net/ThinkingStiff/b8fLU/" rel="noreferrer">http://jsfiddle.net/ThinkingStiff/b8fLU/</a> (taken from another question)</p>
  
  <p>But what if I want to do this with an absolute div using background-image?</p>
  
  <pre><code>&lt;div id="background"&gt;&lt;/div&gt;
  
  #background {
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      height: 100%;
      width: 100%;
      filter: blur(5px) brightness(0.75);
      -webkit-filter: blur(5px) brightness(0.75);
      -moz-filter: blur(5px) brightness(0.75);
      -ms-filter: blur(5px) brightness(0.75);
      -o-filter: blur(5px) brightness(0.75);
      position: absolute;
      background-image: url('images/bg.png');
      z-index: 1;
  }
  </code></pre>
  
  <p>How can I achieve the same effect (blur but with sharp edges) using the setup above?</p>