Absolute position of DIVs with a background image

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

That might be a little more complicated than it seems based on how you want it to scale, check this answer (second part has a CSS only version): http://stackoverflow.com/a/36097410/2827823 — Asons, May 08 '17 at 14:10
It is better to use % instead of px for your position, so it is responsive. and those dot should be `relative` to the img not `absolute` — Dalin Huang, May 08 '17 at 14:14

score 0 · Answer 1 · answered May 08 '17 at 13:17

0

if you set a fixed width to container

.div-bg{ width:700px;}

will fix your issue

answered May 08 '17 at 13:17

Fadi Abo Msalam

6,739
2
20
25

score 0 · Answer 2 · answered May 08 '17 at 13:18

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;

score 0 · Answer 3 · edited May 08 '17 at 15:20

0

.div-bg{
   width:555px;
}

add this CSS to your code.

edited May 08 '17 at 15:20

bensiu

24,660
56
77
117

answered May 08 '17 at 13:28

Ahmet Yılmaz

425
5
16

score 0 · Answer 4 · answered May 08 '17 at 16:08

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>

Absolute position of DIVs with a background image

4 Answers4