My goal is to have the Mario image displayed on top of the background seen in the screenshot below. While I've managed to get it working, I'm struggling to center the Mario image properly over the background. Additionally, I would like to eliminate the unwanted repeating pattern from the background image. Code:
.marioHeader{
background-image: url("resources/marioBackground.jpg");
background-size: 600px;
height: 500px;
background-position: bottom;
margin: auto;
}
.headermario {
background-image: url("resources/banner.png");
background-size: 600px;
background-repeat: no-repeat;
background-position: bottom;
height: 200px;
display: block;
margin: auto;
}
<div class="marioHeader">
<div class="headermario">
</div>
</div>
View the current appearance here: https://i.sstatic.net/dUCOE.png