Fullscreen background with absolute divs - html

Question

I'm trying to display a full screen background with multiple div's on top of it. When I'm resizing the browser, the divs also have to move. I want the divs to resize as well, so that they will stay at the same spot of the background image.
I've found a great solution on Stackoverflow, but the image isn't a full screen background. I've tried to adjust it but it doesn't seems to work. Who can help me?
.div-bg {
height: 100vmin;
width: 100vmin;
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: 27%;
left: 30%;
}
.cities.Bangalore {
position: absolute;
top: 85%;
left: 33%;
}
<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>

Answer 1

Just change .cities position from absolute to fixed...and instead of using vmin for width and height...use px or rem
.div-bg {
background-image: url('https://image.ibb.co/f1qio5/insights_indiamap.jpg');
height: 30rem;
width: 30rem;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
background-size: auto;
}
.cities {
position: fixed;
border: 1px solid red;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: red;
}
.cities.Delhi {
position: absolute;
top: 27%;
left: 30%;
}
.cities.Bangalore {
position: absolute;
top: 85%;
left: 33%;
}
<div class="div-bg">
<div class="cities Delhi"></div>
<div class="cities Bangalore"></div>
</div>