Absolute position of DIVs with a background image - html

Question

I'm planning to position some DIVs on top of a background image but it doesn't seem to work well. The positions of the DIVs changes when the screen size change. Media Query is not the solution. Any help?
HTML
<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;
}
JSFIDDLE DEMO

Answer 1

if you set a fixed width to container
.div-bg{ width:700px;}
will fix your issue

Answer 2

The position of the red dots is not changing, the position of the background image inside of div-bg is what is changing. Inspect that div while resizing and you will see. One way to keep this from happening would be to give the div a fixed width and height. Check out update fiddle.
width: 500px;

Answer 3

.div-bg{
width:555px;
}
add this CSS to your code.

Answer 4

For the image dimensions, use vmin units, the will adapt gracefully to the viewport dimension.
And set the position of the cities in percentage
.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>