Html 跟随背景图像的div

我的问题是，我正在制作一个响应性很强的web应用程序，我需要一个背景图像，我希望div中的一些点能够跟随/粘贴到背景图像上。对我来说，背景是缩放还是只切割侧面都无关紧要

我做了一把小提琴：

html:

---

希望我的问题足够清楚，否则就问吧。

正如你所说的，它是否被切断并不重要。你所要做的就是确保点的位置相对于地图的中心，因为你正在将地图居中

.point-location
{
    position: absolute;
    top:50%;
    left:50%; 
}

---

很抱歉花了这么长时间回答。我发现我遇到了另一个问题，我在使用引导，正因为它的行为有点不同，我举了一个例子：知道如何解决这个问题吗？这只是一个垂直的问题，我猜你的意思是滚动时的问题，只是从背景中删除固定属性，这样它也可以滚动

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;
}}

.point-location
{
    position: absolute;
    top:50%;
    left:50%; 
}