Javascript 使地图具有响应性

我目前正在渲染Joomla网站。但我对索比普罗地图有意见。我正在显示一个地图（背景img）和点（链接+img），上面有一个绝对位置，所以如果你缩小地图的大小，它就不适合了

这是html&css->

<div id="system">
    <article class="item">
      <div class="content clearfix">
        <div id="plan-boutiques">
          <a href="#" id="repere-dia" style="" data-lightbox="width:600;type:iframe;">18</a>
          <!-- 31 links like this ^ -->
        </div>
      </div>
    </article>
</div>

每个点（总共31个）都应用了一个id，如下所示：

a#repere-dia {
  left: 391px;
  top: 182px;
}

我已经尝试过逐像素移动，但是有30个点，这不是正确的解决方案，所以我正在寻找一些jQuery或Javascript解决方案

编辑

新问题：即使缩小窗口，背景仍保持居中。

试试这个

#plan-boutiques {
 background: url(../images/rom/niveau.png) no-repeat;
 position: relative;
 display: block;
 height: auto;
 width: 100%;
 margin: 0 auto;
 z-index: 1;
}

---

在css中使用百分比定位而不是像素

 a#repere-dia {
   left: 10.43%;
   top: 27.02%;
 }

---

不，这不起作用，如果我将高度更改为“自动”，背景将不再显示。但我不是在看如何渲染背景，而是在上面有点的整个地图

 a#repere-dia {
   left: 10.43%;
   top: 27.02%;
 }