Unblur content inside blurring background div - html

Question

So I really like this kind of special effect here https://www.w3schools.com/howto/howto_css_blurred_background.asp 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.
This time I want a blurring background (wallpaper number two) while having the stuff where I already want it placed and have it focus.
Is there a way to achieve that?
Starting where the bg-image2, I want the h1, and the p, inside bg-image2 to focus over the blurring background image.
NOTE: 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.
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%);
}
<div class="bg-image"></div>
<div class="bg-text">
<h1>My name is Stackoverflow</h1>
<p>And I am a website</p>
</div>
<div class="bg-image2">
<!-- This is the part where I want my stuff to not be blurred and focus -->
<div class="profilePicture">
<img src="images/profilePic.jpg" style="width: 170px; height: 170px; border-radius:50%;">
<h1>This is a title</h1>
<p>This is just a paragraph</p>
</div>
</div>

Answer 1

Is that the result you are looking for?
https://codepen.io/anon/pen/exVRyy
All i did was to create a div around the bg-image2 and profilePicture, so that the blur on bg-image2 doesn't affect profilePicture, then set that div to position:relative; , so that the profilePicture can be placed in the middle like you did.
Here is your HTML edited:
<div class="bg-image"></div>
<div class="bg-text">
<h1>My name is Stackoverflow</h1>
<p>And I am a website</p>
</div>
<div class="bg-test">
<div class="bg-image2">
<!-- This is the part where I want my stuff to not be blurred and focus -->
</div>
<div class="profilePicture">
<img src="https://images.pexels.com/photos/1253661/pexels-photo-1253661.jpeg?cs=srgb&dl=android-wallpaper-bluhen-blume-1253661.jpg&fm=jpg" style="width: 170px; height: 170px; border-radius:50%;">
<h1>This is a title</h1>
<p>This is just a paragraph</p>
</div>
</div>
And the CSS:
body,
html {
height: 100%;
}
* {
box-sizing: border-box;
}
.bg-image {
/* The image used */
background-image: url("https://images.unsplash.com/photo-1507608616759-54f48f0af0ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
/* 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-test {
position:relative;
}
.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("https://whatthenewsblog.files.wordpress.com/2015/03/ecl-ann.jpg");
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100vh;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.profilePicture {
position: absolute;
left: 50%;
top:50%;
margin: 0 auto;
transform: translate(-50%, -50%);
}

Answer 2

I was facing a similar issue. After a lot of searches, I found the perfect solution.
You can use backdrop-filter.
Your code:
body,
html {
height: 100%;
}
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.bg-image {
/* The image used */
background-image: url("https://images.unsplash.com/photo-1507608616759-54f48f0af0ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
/* Add the blur effect */
/* 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-test {
position:relative;
}
.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;
backdrop-filter: blur(8px);
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("https://blog.prezi.com/wp-content/uploads/2019/03/patrick-tomasso-208114-unsplash-1024x768.jpg");
/* Add the blur effect */
/* Full height */
height: 100vh;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.profilePicture {
backdrop-filter: blur(8px);
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
left: 50%;
color: white;
top:50%;
margin: 0 auto;
transform: translate(-50%, -50%);
}
<div class="bg-image">
<div class="bg-text">
<h1>My name is Stackoverflow</h1>
<p>And I am a website</p>
</div>
</div>
<div class="bg-test">
<div class="bg-image2">
<!-- This is the part where I want my stuff to not be blurred and focus -->
<div class="profilePicture">
<img src="https://images.pexels.com/photos/1253661/pexels-photo-1253661.jpeg?cs=srgb&dl=android-wallpaper-bluhen-blume-1253661.jpg&fm=jpg" style="width: 170px; height: 170px; border-radius:50%;">
<h1>This is a title</h1>
<p>This is just a paragraph</p>
</div>
</div>
</div>
I know its been so long since you asked and you got the answers.
Hope this will be helpful for someone else :)
I modified code from cryptomothy