I want to put the text over the div that is containing an image and that div is inside another div that also has an image.
.marioHeader {
background-image: url("resources/marioBackground.jpg");
background-size: 600px;
height: 500px;
background-position: bottom;
display: flex;
justify-content: center;
align-items: center;
background-repeat: repeat-x;
background-color: #6096ff;
margin-top: 50px;
text-align: center;
}
.title {
text-align: center;
}
.headermario {
background-image: url("resources/banner.png");
background-size: 600px;
background-repeat: no-repeat;
background-position: bottom;
background-color: red;
height: 200px;
width: 90%;
}<div class="marioHeader">
<h1 class="title">Super Mario</h1>
<div class="headermario">
</div>
</div>It looks like this: 
I want it to look like this: 
>Solution :
Use the below code:
.marioHeader {
background-image: url("resources/marioBackground.jpg");
background-size: 600px;
height: 500px;
background-position: bottom;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-repeat: repeat-x;
background-color: #6096ff;
margin-top: 50px;
text-align: center;
}
.title {
text-align: center;
}
.headermario {
background-image: url("resources/banner.png");
background-size: 600px;
background-repeat: no-repeat;
background-position: bottom;
background-color: red;
height: 200px;
width: 90%;
} <div class="marioHeader">
<h1 class="title">Super Mario</h1>
<div class="headermario">
</div>
</div>