Javascript 位于背景图像上的内容

我试图根据背景图像的某些元素定位内容。我做了很多研究，似乎可以通过JavaScript实现，但我对JavaScript的功能不是很熟悉

以下是我使用的背景图像：

我试图确保信息保存在图像上的4个框中。目前，我已使用以下CSS确保背景图像在浏览器中保持完美大小：

background-image: url('../images/bg2.jpg'); <br />
background-repeat:no-repeat; <br />
background-position:center center; <br />
background-attachment:fixed; <br />
-o-background-size: 100% 100%, auto; <br />
-moz-background-size: 100% 100%, auto; <br />
-webkit-background-size: 100% 100%, auto; <br />
background-size: 100% 100%, auto;

背景图像：url（'../images/bg2.jpg'）

背景重复：无重复

背景位置：中心

背景附件：固定

-o-背景尺寸：100%100%，自动

-moz背景尺寸：100%100%，自动

-webkit背景尺寸：100%100%，自动

背景尺寸：100%100%，自动；

这段代码可能不是我想要实现的目标所必需的，我不完全确定

当内容保持一个分辨率时，定位内容很容易，但一旦调整浏览器的大小，内容就会与图像不连贯地移动

---

任何帮助都将不胜感激

我建议将整个用户界面放在一个完整的图像中，然后在上面应用文本，这可能会给你带来最大的痛苦

我建议您将动物作为背景图像的唯一元素，然后您可以在其上方添加其他HTML元素（例如徽标），然后可以在其他所有元素下方再次添加四个框

---

通过这种方式，您可以使用CSS确保主图形（即徽标和“即将到来”文本）位于中心，您可以使用CSS将框的大小专门调整为固定比例，这些框将根据浏览器分辨率进行更有效的缩放。

您不能将Buffalo图像和该图像中的其他元素分开吗？或者所有这些都必须是背景图像的一部分

---

如果是我，我只会把布法罗的照片作为背景图片。我将在HTML中创建其他元素。如果必须，您可以根据媒体查询更改其大小。

您如何定位内容？这是这里的关键问题。你想让它相对于图像（位置：相对），这样它总是有相同的左，从图像顶部的位置。我不知道为什么我没有这样做在第一位。。。巨大的精神空白。谢谢杰夫