title: CSS: How to blur background image within the div?
body: <p>I want to blur the background image that is only at the back of the <code>div</code> but if i try to add <code>filter:blur(10px);</code> in the css, only the <code>div</code> will blur and not the background. I want it to be something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/SOq33.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SOq33.png" alt="enter image description here"></a></p>
  
  <p>Here is my code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-image: url(http://img0.mxstatic.com/wallpapers/6cba18f8e9c95b677bcc999c1e73e496_large.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .contain {
    width: 100%;
    height: 100%;
  }
  .box {
    border: 1px solid #fff;
    border-radius: 10px;
    padding: 10px;
    width: 200px;
    background-color: #fff;
    opacity: 0.7;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="contain" align="right"&gt;
    &lt;div class="box"&gt;
      &lt;h1&gt;Header&lt;/h1&gt;
  
      &lt;p&gt;Paragraph. Something to write...&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>