Text filled with blurred background image - css

Question

I'm trying to create a title that has a glass looking visual which blurs the background image.
I was able to do it but I had to make references to the background image 3 times and it doesn't seem very optimal.
Here is the code I used.
body {
background: blue url("https://images5.alphacoders.com/318/318370.jpg") no-repeat center center fixed;
background-size: cover;
}
.bimage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("https://images5.alphacoders.com/318/318370.jpg") no-repeat center center fixed;
filter: blur(10px);
background-size: cover;
}
.title {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
}
h2 {
font-family: Verdana;
position: absolute;
top: 0;
left: 0;
//display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 500px;
margin: 0;
font-weight: bold;
font-size: 18vw;
text-align: center;
text-transform: uppercase;
mix-blend-mode: screen;
}
.mask {
background: #fff;
}
#h2 {
background: url("https://images5.alphacoders.com/318/318370.jpg") no-repeat center center fixed;
color: rgba(255, 255, 255, 1);
background-size: cover;
mix-blend-mode: multiply;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: rgba(255, 255, 255, 0.4);
text-shadow: 3px 3px 10px black;
}
<div class="title">
<div id="bimage" class="bimage"></div>
<h2 class="mask">MARIO</h2>
<h2 id="h2">MARIO</h2>
</div>
https://codepen.io/marceltoma/pen/zYWGYwp
I wonder if there's a better way to do this.

Answer 1

Looking at your codepen, you can start reusing css in many places.
This is just an example for you to get started:
/* Reusing background properties */
#h2, body, .bimage {
background: url("https://images5.alphacoders.com/318/318370.jpg") no-repeat center center fixed;
background-size: cover;
}
/* Reusing with children selector */
.title, .title * {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
body {
background-color: blue
}
.bimage {
height: 100%;
filter: blur(10px);
}
.title {
position: relative;
height: 500px;
overflow: hidden;
}
h2 {
font-family:Verdana;
//display: flex;
align-items: center;
justify-content: center;
height: 500px;
margin: 0;
font-weight: bold;
font-size: 18vw;
text-align: center;
text-transform: uppercase;
mix-blend-mode: screen;
}
.mask {
background: #fff;
}
#h2 {
color: rgba(255,255,255,1);
mix-blend-mode: multiply;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: rgba(255, 255, 255, 0.4);
text-shadow: 3px 3px 10px black;
}
<div class="title">
<div id="bimage" class="bimage"></div>
<h2 class="mask">MARIO</h2>
<h2 id="h2">MARIO</h2>
</div>
Please give it a try, and keep DRY!