title: Unblur content inside blurring background div
body: <p>So I really like this kind of special effect here <a href="https://www.w3schools.com/howto/howto_css_blurred_background.asp" rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_css_blurred_background.asp</a> where you can blur out a background and have the text show up. The problem that I am currently having right now is that I want to add in another wallpaper for my second content below my first content. The first content is good. Now I want my second content to be in the second wallpaper as you scroll. Kind of like creating a parallax effect, but instead I am am creating my own unique website.</p>
  
  <p>This time I want a blurring background (<em>wallpaper number two</em>) while having the stuff where I already want it placed and have it focus.</p>
  
  <p>Is there a way to achieve that?</p>
  
  <p>Starting where the <code>bg-image2</code>, I want the <code>h1</code>, and the <code>p</code>, inside <code>bg-image2</code> to focus over the blurring background image.</p>
  
  <p><strong><em>NOTE:</em></strong> <strong>The wallpaper will not show in the snippet below because I already got the pictures I need in my folder which is located in my computer.</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>body,
  html {
    height: 100%;
  }
  
  * {
    box-sizing: border-box;
  }
  
  .bg-image {
    /* The image used */
    background-image: url("images/wallpaper1.jpg");
    /* Add the blur effect */
    filter: blur(8px);
    -webkit-filter: blur(8px);
    /* Full height */
    height: 100%;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  
  /* Position text in the middle of the page/image */
  
  .bg-text {
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/opacity/see-through */
    color: white;
    font-weight: bold;
    border: 3px solid #f1f1f1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 80%;
    padding: 20px;
    text-align: center;
  }
  
  .bg-image2 {
    /* The image used */
    background-image: url("images/wallpaper2.jpg");
    /* Add the blur effect */
    filter: blur(8px);
    -webkit-filter: blur(8px);
    /* Full height */
    height: 100%;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  .profilePicture {
    position: absolute;
    left: 50%;
    margin: 200px auto;
    transform: translate(-50%, -50%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="bg-image"&gt;&lt;/div&gt;
  
  &lt;div class="bg-text"&gt;
    &lt;h1&gt;My name is Stackoverflow&lt;/h1&gt;
    &lt;p&gt;And I am a website&lt;/p&gt;
  &lt;/div&gt;
  
  
  &lt;div class="bg-image2"&gt;
  
    &lt;!-- This is the part where I want my stuff to not be blurred and focus --&gt;
      
    &lt;div class="profilePicture"&gt;
      &lt;img src="images/profilePic.jpg" style="width: 170px; height: 170px; border-radius:50%;"&gt;
      &lt;h1&gt;This is a title&lt;/h1&gt;
      &lt;p&gt;This is just a paragraph&lt;/p&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>