div that follow background image - html

Question

My problem is that I'm making a responsive web app, and I need a background image, where I want some dot's in div's to follow/stick to the background image. For me it dosen't matter if the background scales or just cuts the sides.
i have made a fiddle: http://jsfiddle.net/2bhk5n5y/6/
html:
<div id="map">
<div id="point1" class="point-location"><div class="point-dot"></div><div class="point-pulse"></div></div>
<div id="point2" class="point-location"><div class="point-dot"></div><div class="point-pulse"></div></div>
<div id="point3" class="point-location"><div class="point-dot"></div><div class="point-pulse"></div></div>
</div>
css:
body {
background-color:#000000;}
#map {
width:100%;
height:600px;
background: url('https://treasurehuntdesign.com/wp-content/uploads/2010/09/how-to-make-a-treasure-map-9.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
#point1 {
left: 20%;
top: 10%;}
#point2 {
left: 400px;
top: 150px;}
#point3 {
left: 500px;
top: 400px;}
.point-location {
position: fixed;
z-index: 2;
transform: rotateX(60deg);
-ms-transform: rotateX(60deg);
-moz-transform: rotateX(60deg);
-webkit-transform: rotateX(60deg);}
.point-dot{
width: 13px;
height: 13px;
border: 2px solid #000000;
border-radius: 30px;
background: #000000;
position: fixed;
top: 21px;
left: 21px;}
.point-pulse{
border: 5px solid #000;
background: transparent;
border-radius: 60px;
height: 50px;
width: 50px;
transform: scale(0.5);
animation: pulse 10s ease-out;
animation-iteration-count: infinite;
-ms-transform: scale(0.5);
-ms-animation: pulse 10s ease-out;
-ms-animation-iteration-count: infinite;
-moz-transform: scale(0.5);
-moz-animation: pulse 10s ease-out;
-moz-animation-iteration-count: infinite;
-webkit-transform: scale(0.5);
-webkit-animation: pulse 10s ease-out;
-webkit-animation-iteration-count: infinite;}
#keyframes pulse {
0% {
transform: scale(0);
opacity: 0.8;
}
10% {
transform: scale(2);
opacity: 0;
border: 5px solid #FFFFFF;
}
100% {
transform: scale(2);
opacity: 0;
}}
#-ms-keyframes pulse {
0% {
-ms-transform: scale(0);
opacity: 0.8;
}
10% {
-ms-transform: scale(2);
opacity: 0;
border: 5px solid #FFFFFF;
}
100% {
-ms-transform: scale(2);
opacity: 0;
}}
#-moz-keyframes pulse {
0% {
-moz-transform: scale(0);
opacity: 0.8;
}
10% {
-moz-transform: scale(2);
opacity: 0;
border: 5px solid #FFFFFF;
}
100% {
-moz-transform: scale(2);
opacity: 0;
}}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scale(0);
opacity: 0.8;
}
10% {
-webkit-transform: scale(2);
opacity: 0;
border: 5px solid #2b99df;
}
100% {
-webkit-transform: scale(2);
opacity: 0;
}}
Hope my question is clear enough, else just ask.

Answer 1

as you said it does not matter if it's cut off all you have to do is make sure the points are positioned relative to the center of the map, as you are centering the map.
.point-location
{
position: absolute;
top:50%;
left:50%;
}
http://jsfiddle.net/2bhk5n5y/7/