title: css blur technique only for the background
body: <p>i want to blur the background image of this html code using css3 filter and please provide explanation.</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Student-login&lt;/title&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'&gt;
      &lt;style&gt;
          body{
  
              background-image: url("background.jpg");
              background-size: cover;
              background-repeat: no-repeat;
              background-position: center;
              background-attachment: fixed;
          }
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="main-form"&gt;
      &lt;h1&gt;Hello&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But the content in this will not get blurred.</p>