Is there a way to properly position DIVs on top of a background image without them shifting when the screen size changes? Media Query hasn't been successful for me. Any suggestions?
Here is my code:
<div class="div-bg" style="background-image:url('https://image.ibb.co/f1qio5/insights_indiamap.jpg')">
<div class="cities Delhi"></div>
<div class="cities Bangalore"></div>
</div>
CSS:
.div-bg {
height: 85vh;
min-height: 500px;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
}
.cities {
border: 1px solid red;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: red;
}
.cities.Delhi {
position: absolute;
top: 150px;
left: 175px;
}
.cities.Bangalore {
position: absolute;
top: 250px;
left: 275px;
}