title: Background Blur - CSS
body: <p><strong>Hello</strong> I try to make this background Blur like this image so I'd like to know if I can do it using CSS3 only or I need to use Javascript &amp; Jquery:
  <br>
  And if I will use css only How to make the blur is responsive.</p>
  
  <p><br>
  <a href="https://i.stack.imgur.com/myUxs.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/myUxs.jpg" alt="enter image description here"></a></p>
  
  <p><br>
  <strong>Here my simple code:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#bg{
    background-image: url('http://store6.up-00.com/2017-03/149079039538851.jpg');
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  #bg {
    background-position: center top;
    padding: 70px 90px 120px 90px;
  }
  
  #search-container {
    position: relative;
  }
  
  #search-bg {
    /* Absolutely position it, but stretch it to all four corners, then put it just behind #search's z-index */
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 99;
    /* Pull the background 70px higher to the same place as #bg's */
    /*background-position: center -70px;*/
    -webkit-filter: blur(10px);
    filter: blur(10px);
  }
  
  #search {
    position: relative;
    z-index: 100;
    padding: 20px;
    background: rgba(34,34,34,0.75);
  }
  #search h2{
      color:#ffffff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="bg"&gt;
          &lt;div id="search-container"&gt;
              &lt;div id="search-bg"&gt;&lt;/div&gt;
              &lt;div id="search"&gt;
                  &lt;h2&gt;Hello World&lt;/h2&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>