title: How to make a blur effect over a background
body: <p>I have a video background on my website, which want to have a blur overlay over it. Something like IOS7 Notification Center. Since I could not do it by Photoshop. I thought to use blur effect in CSS. It seems also doesn not do what I want.</p>
  
  <p>However, I made a div class width 100% height and width. and choose white color as background, then gave it the blur element.  It does not work the way I want, anyway. </p>
  
  <pre><code>#blur{
  width: 100%;
  height: 100%;
  z-index: -1;
  position: fixed;
  background: #FFF;
  top: 0;
  filter:blur(350px);
    -o-filter:blur(350px);
    -ms-filter:blur(350px);
    -moz-filter:blur(350px);
    -webkit-filter:blur(350px);
  }
  </code></pre>
  
  <p>HTML : <code>&lt;div id="blur"&gt;&amp;nbsp;&lt;/div&gt;</code></p>
  
  <p>This is an example like what I am looking for: <a href="http://wpuploads.appadvice.com/wp-content/uploads/2013/06/117.jpg" rel="nofollow">http://wpuploads.appadvice.com/wp-content/uploads/2013/06/117.jpg</a>
  Any idea?</p>