I have an image of a town containing some buildings and I placed it as a background of a div.

Now I wanted to add inside that div smaller images with each building from the background so they would be exactly at the same positions as on the background image.

The smaller images are slightly lighter than original buildings on the background so I will later get the hover effect with highlighted building.

The problem is that my buildings are flying around on different devices. No matter if I set the left/top with percentages % or vh, px. They always change the positions relatively to the main div with town view background.

What I need is the background and smaller images inside stay always the same no matter what.

I am using only simple css with some tailwind css styles but no matter what i do it does not work. It would be nice if the picture wouldn’t be scrollable so people on all devices see the full picture.

What is the best way to do that?

<div class="relative" style="width: 100%; height: 100%; background-image: url('/images/Town_5.png'); background-size: contain; background-repeat: no-repeat;">
    <img src="/images/House_4.png" class="absolute" style="left:7%; top:5%; width:17%">
    <img src="/images/Mine_1.png" class="absolute" style="left:40%; top:0%; width:21%">
</div>