Bartas Bartas - 1 month ago 15
CSS Question

Responsive map with mark (div element)

everybody
I have problem with responsive map (this is only image not real map). I try to stick div element on this map for example: my mark(div) is on Paris but when I resize window mark is in other country :D I want stick this element for this one country. I try like this:

HTML:

<div class="container-fluid map">
<div class="circle"></div>
</div>


CSS:

.map {
background-image: url(../images/only-map.png);
background-repeat: no-repeat;
background-size: 100% 100%;
height: 500px;
width: 100%;
position: relative;
}

.circle {
width: 10px;
height: 10px;
background-color: #fff;
position: absolute;
top: 200px;
right: 400px;
float: right;
}


I try with position absolute, fixed. Background size cover,contain, 100% 100%, but still not working.

Thank for every advance

Answer Source

You can do something like this:

HTML:

<div class="map rel">
   <div class="dot abs">
   </div>
</div>

CSS:

.map{
  width: 500px;
  height: 500px;
  background-color: blue;
}

.dot{
  width: 20px;
  height: 20px;
  background-color: red;
}

.rel{
  position: relative;
}

.abs{
  position: absolute;
  top: 8px;
  left: 8px;
}

You can play around with it here. Hope that helps.