title: Using blur.js to achieve Gaussian blur effect
body: <p><a href="http://blurjs.com" rel="nofollow">http://blurjs.com</a></p>
  
  <p>In the website above, the windows create a Gaussian blur effect like looking through frosted glass. I could put any text/image/element behind each of those windows and the blur effect of those things will be seen.</p>
  
  <p>So I tried the blur.js plugin itself, but it's simply not working for me:</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>body {
  background-image: url(orangewallpaper.jpg);
  }
  
  #bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background: #FFF;
  background-size: cover !important;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="bg"&gt;&lt;/div&gt;
  
  &lt;script src="blur.js"&gt;&lt;/script&gt;
  &lt;script src="jquery-1.11.1.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $(document).ready( function() {
  $('#bg').blurjs({
      source: 'body',
      radius: 30,
      overlay: 'rgba(0, 0, 0, .2)'
     });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>..and what I'm getting as a result is just a blank white coloured website for some reason, not the Gaussian blur effect as intended. </p>
  
  <p>Could anyone help to see what is wrong with my code exactly? I don't see how I missed anything out yet I'm not getting the result.</p>