title: CSS blur property only for background-image
body: <p>I am trying to apply the CSS blur property only to the background-image of with <code>id="home"</code>, but it also reflects in children class too. My HTML code is:</p>
  
  <pre><code>&lt;section id="home"&gt;            
      &lt;div class="home"&gt;
          &lt;h1&gt;ncats is an innovative&lt;/h1&gt;
      &lt;/div&gt;             
  &lt;/section&gt;
  </code></pre>
  
  <p>My CSS code is:</p>
  
  <pre><code>#home{
      display: block;
      background:url(../images/2.jpg) no-repeat;
      background-size: cover;
      -webkit-filter: blur(5px);
      -moz-filter: blur(5px);
      -o-filter: blur(5px);
      -ms-filter: blur(5px);
      filter: blur(5px);
      width: 100%;
      height: 1080px;
  }
  .home{
      text-align:center;
  }
  </code></pre>
  
  <p>I'm trying to get an output like in the below link:
  <a href="http://codepen.io/akademy/pen/FlkzB" rel="nofollow">http://codepen.io/akademy/pen/FlkzB</a></p>
  
  <p>But my output is like this, instead: <a href="http://codepen.io/anon/pen/yyEZOb" rel="nofollow">http://codepen.io/anon/pen/yyEZOb</a></p>