title: Making text-box background blurry with CSS
body: <p>The whole problem is demostrated on this JSFiddle page I created: <a href="http://jsfiddle.net/r480pggf/4/" rel="nofollow">http://jsfiddle.net/r480pggf/4/</a></p>
  
  <p>My purpose is to make the background of the black box blurry. The black box is supposed to contain text inside p tags.</p>
  
  <p>I have almost solved the problem but for some reason if I use p tag inside the black box, it creates blurrness on top of the black box (might be a bit difficult to see, please look close at your monitor). If p tag is removed, everything works as expected, but I would like to feel free to use p tags inside the black box.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="content-box"&gt;
      &lt;div class="content-bg"&gt;&lt;/div&gt;
      &lt;div class="content"&gt;
          &lt;p&gt;Text with blurred background&lt;/p&gt;
          &lt;br&gt;Text with blurred background
          &lt;br&gt;Text with blurred background
          &lt;br&gt;Text with blurred background
          &lt;br&gt;Text with blurred background
          &lt;br&gt;Text with blurred background
          &lt;br&gt;Text with blurred background
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body {
      background-image: url('http://7-themes.com/data_images/out/65/6995506-wood-textured-desktop-background.jpg');
      background-color: black;
      background-repeat: no-repeat;
      background-position: center;
      background-attachment: fixed;
      background-size: cover;
      background-size: no-repeat fixed center center cover;
      overflow: hidden;
  }
  
  .content-box {
      position: relative;
      width: 300px;
      overflow: hidden;
  }
  
  .content-bg {
      position: absolute;
      background-size: cover;
      background-image: url('http://7-themes.com/data_images/out/65/6995506-wood-textured-desktop-background.jpg');
      background-color: black;
      background-repeat: no-repeat;
      background-position: center;
      background-attachment: fixed;
      background-size: cover;
      background-size: no-repeat fixed center center cover;
      filter: blur(5px);
      -webkit-filter: blur(5px);
  }
  
  .content {
      border-radius: 10px;
      z-index: 100;
      background-color: black;
      opacity: 0.7;
      color: white;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>function updateBackground() {
      var contentBox = $(".content-box");
      var bg = $(".content-bg");
      bg.css("left", -(contentBox.offset().left));
      bg.css("top", -(contentBox.offset().top));
      bg.width($(window).width());
      bg.height($(window).height());
  }
  
  $(window).resize(function() {
      updateBackground();
  });
  
  updateBackground();
  </code></pre>