Position image inside and behind a background image - html

Question

I'm planning to position some images in a circle background image but it doesn't seem to work well.
My goal is to center these images behind and inside the circle.
Any help?
div.info_image {
text-align: center;
border: none;
background: url("http://japancrystal.altervista.org/themes/crystal/imgs/colonna_sx/cerchio_descrizioneluogo.png");
background-repeat: no-repeat;
background-position: center;
height: 220px;
width: 100%;
}
img.img_place{
text-align: center;
border-radius: 100%;
width: 155px;
height: 155px;
margin-top: 30px;
margin-left: 30px;
}
<div class="info_image">
<img src="http://japancrystal.altervista.org/themes/crystal/imgs/locations/ingresso.png" class="img_place">
</div>
JSFIDDLE DEMO
RESULT DEMO

Answer 1

You can add this code to your img_place class :
img.img_place {
position: relative;
z-index: -1;
}

Answer 2

Try this :
div.info_image {
position: relative;
background: url(http://japancrystal.altervista.org/themes/crystal/imgs/colonna_sx/cerchio_descrizioneluogo.png);
background-repeat: no-repeat;
background-position: center;
height: 220px;
}
img.img_place {
position: absolute;
top: calc(50% + 3px);
left: calc(50% + 7px);
transform: translate(-50%, -50%);
border-radius: 100%;
height: 173px;
z-index: -1;
}

Answer 3

Try this.
div.info_image {
border: none;
background: url("http://japancrystal.altervista.org/themes/crystal/imgs/colonna_sx/cerchio_descrizioneluogo.png") no-repeat center center;
height: 220px;
width: 244px;
display: flex;
justify-content: center;
align-items: center;
}
img.img_place {
border-radius: 100%;
width: 173px;
height: 173px;
transform: translate(8px, 3px);
position: relative;
z-index: -1;
}
<div class="info_image">
<img src="http://japancrystal.altervista.org/themes/crystal/imgs/locations/ingresso.png" class="img_place">
</div>
Not sure why your images don't show in snippet, but they do in this fiddle...
FIDDLE

Answer 4

You can use display: grid to place them on top of each other.
Because the "ring" image isn't placed with the circle in the middle, I had to use transform: translate to move it, which changed the stacking order too. That's why there is a z-index of -1 on the city image.
For some reason, justify-content: center and align-items: center on .info_image didn't work as well as using self-justify and self-align on the images.
div.info_image {
display: grid;
grid-template-areas: "stacked";
height: 220px;
width: 100%;
}
.info_image > img {
--img-size: 155px;
border-radius: 50%;
grid-area: stacked;
width: var(--img-size);
justify-self: center;
align-self: center;
}
.info_image > .city {
--img-size: 110px;
transform: translate(5px, 2px);
z-index: -1;
}
<div class="info_image">
<img class="city" src="https://japancrystal.altervista.org/themes/crystal/imgs/locations/ingresso.png" />
<img src="https://japancrystal.altervista.org/themes/crystal/imgs/colonna_sx/cerchio_descrizioneluogo.png" />
</div>