To style the content in your CSS file, make the following adjustments:
.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'm using absolute positioning to overlay the text on the background image and then applying a transform to center it.