Css 如何使标题背景图像的缩放速度与正文背景相同？

我有一个固定的导航栏的背景图像和我们的网站的主体相同的背景图像。目标是当用户在本网站上滚动时，创建导航下内容的效果：

这是我正在建设的网站，问题是：

当我的屏幕页面处于全宽时，一切看起来都很好，但当我调整窗口大小时，标题中的背景图像的大小调整速度与主体上的不同。这是我用于标题的css：

#main-header{
    position:fixed!important;
    background-image:url("img");
    background-position-y: -62px;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

我看到标题中的图像在x轴和y轴上一直在缩放，在背景图像上，它在两个轴上缩放了一段时间，但在某个点上，它只是水平缩放，而不是垂直缩放。任何帮助都将不胜感激

---

请注意：当以不同的屏幕尺寸（如移动设备与计算机）查看页面时，问题最为明显

将标题设置为全宽，然后为主体和标题提供相同的背景图像和选项。还要确保背景居中

现在添加类似这样的内容。您很可能需要删除一些！重要的

@media screen and (max-width: 999px) { 
    body {
        background-size: contain;
    }

    #main-header {
        background-position-y: -30px;
    }
}

---

我曾经检查过不同的屏幕大小

对不起，我可以发表评论，所以我发布了一个答案

问题是标题在Y轴上的位置为30px。最简单的方法是将该值设置为0px。

---

否则，您必须通过删除原始图像的30像素，为标题使用第二个背景img。

您是否尝试过将标题和主体定位为绝对位置，并使其为窗口的100%宽度和高度。然后将背景图像作为封面放在两者上。然后你可以制作一个div，它的位置应该离顶部有多远，就像你的标题一样，并让它隐藏溢出。如果我将两者都设置在中间，并稍微调整标题的Y偏移量，这似乎是可行的。嗯，即使你将窗口的大小调整为移动大小，它也会起作用？将大背景图像设置在

body

上，然后删除它从标题和任何其他地方。然后，我将失去整个滚动下的标题效果，我试图实现。