title: How to blur background img - css?
body: <p>I'm trying to blur the background img without the text, but the text is getting blur too.
  this is a bootstrap-ui-angular modal. It supposed to be easy, but I just can't get it to work.</p>
  
  <p>the css code:</p>
  
  <pre><code>.test:before{
      content: "";
      z-index: -1;
  
      display: block;
      background: url("../images/3.jpg");
  
      -webkit-filter: blur(5px);
      filter: blur(5px);
  
  
  }
  .test{
      z-index: 0;
  }
  </code></pre>
  
  <p>the html code :</p>
  
  <pre><code>&lt;form ng-submit="ok()" class="test"&gt;
      &lt;div class="modal-header col-lg-12"&gt;
          &lt;h3 class="col-lg-4 col-lg-offset-4"&gt;{{selectedCard.monitorName}}&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;div class="panel-body"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="card-lable"&gt;kind&lt;/label&gt;
                  &lt;p class="card-p"&gt;{{selectedCard.monitorType}}&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="card-lable"&gt;proc&lt;/label&gt;
                  &lt;p class="card-p"&gt;{{selectedCard.monitorProdact}}&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="card-lable"&gt;sys&lt;/label&gt;
                  &lt;p class="card-p"&gt;{{selectedCard.monitorSystem}}&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="card-lable"&gt;ex&lt;/label&gt;
                  &lt;p class="card-p"&gt;{{selectedCard.monitorExplain}}&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer "&gt;
              &lt;button type="submit" class="btn btn-success col-lg-4 col-lg-offset-4"&gt;X&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>