Position div background image on top of another div background image-CodePudding

I want the Mario image to be on top of that background in the screenshot below, as you can see it's working, however I'm not able to center the Mario image on top of the background. I would also like to remove the extra unwanted repeating pattern on 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 >
     <div >
    </div>
  </div>

Image of how it looks:

CodePudding user response：

For centering, you can use flexbox to do this easily: https://jsfiddle.net/tdfu3em1/2/

Just give the container div:

display: flex;
justify-content: center;
align-items: center;

Now the child div will be centered.

As for the repeating pattern, there's not enough info to know. Does it repeat in the original image? I'm guessing not, and you don't have no-repeat. But what do you want to happen in it's place? Nothing? Background color? Kind of depends.