.c{
display: flex;
padding-top: 18em;
.backgroundDiv{
background: url("/images/DSC8253.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center center ;
height: 20em;
opacity: 0.6;
position: absolute;
width: 100%;
z-index: -1;
}
}
.bigText{
display: flex;
text-transform: uppercase;
font-size: 3em;
font-family: cursive;
font-weight: 600;
height: 8em;
top:2em;
}
<section class="c">
<div class="backgroundDiv"></div>
<div class="bigText">
<p>Pilki-HUILKI</p>
</div>
</section>
Here in css file you type like below ( just small change )
.c {
display: flex;
position: relative;
height: 100vh;
}
.backgroundDiv {
background: url('/images/DSC8253.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 20em;
opacity: 0.6;
position: absolute;
width: 100%;
z-index: -1;
}
.bigText {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
text-transform: uppercase;
font-size: 3em;
font-family: cursive;
font-weight: 600;
}
I use position absolute to make the text over the background then i use transform to make it to the center