title: how to blur the background of the text while using bootstrap css file?
body: <p>I have the following code: <a href="http://jsfiddle.net/Leytgm3L/" rel="nofollow">http://jsfiddle.net/Leytgm3L/</a> and as you can see, I use here extended resource - bootstrap.min.css. So far the page looks like in the result of this fiddle. I would like to change it so the darker background is blurred (exactly like in this tutorial <a href="http://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/" rel="nofollow">http://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/</a> ). Is it possible without modifing the bootstrap css file?
  I tried to replace this line:</p>
  
  <pre><code>background: rgba(0, 0, 0, 0.35);
  </code></pre>
  
  <p>with what they suggest on this tutorial:</p>
  
  <pre><code>#black{
  
     -webkit-filter: blur(10px);
      filter: url('/media/blur.svg#blur');
      filter: blur(10px);
  }
  #black p, #black h1{
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px
  }
  </code></pre>
  
  <p>but all I get is blurred text: <a href="http://jsfiddle.net/Leytgm3L/1/" rel="nofollow">http://jsfiddle.net/Leytgm3L/1/</a></p>
  
  <p>could you help me with that?</p>