Html 具有匹配水平导航的可缩放背景图像

我试图保持水平导航条的位置与可缩放的背景图像“同步”。现在，当浏览器调整大小时，图像自由移动时，导航似乎处于静态位置。老实说，我不知道这是否真的可能。以下是网站主页：

www.nickducot.com/parker_new/

以下是我目前掌握的代码：

HTML:

CSS

---

也许媒体查询/响应式设计会有所帮助？谢谢大家!

这里是一个大概的方法，你可以这样做。它涉及将图像放在标记中，而不是作为背景

HTML

编辑：注意，菜单实际上不会改变大小，但会定位到图像的某个点。你还需要使用我使用的所有像素值来达到你想要的效果

<div class="image-wrapper">
    <img src="imagefile.jpg">
    <div id="menu">
        ... menu
    </div>
</div>

.image-wrapper {
    width: 85%;
    max-width: 700px;
    /* Note the above numbers are untested and plucked out of thin air for example purposes */
    position: relative;
    margin: 30px auto;
}
.image-wrapper img {
    max-width: 100%;
}
#menu {
    position: absolute;
    top: 100px;
    right: 0;
}