css - 如何使标题背景图像以与正文背景相同的比例缩放？

Question

我在固定导航栏中有一个背景图像，在我们网站的主体中有相同的背景图像。目标是创建当用户在本网站上滚动时内容在导航下的效果: http://bonobomusic.com/news.php

这是我正在构建的问题所在的站点: http://rattletree.com/wordpress2/

当我的屏幕全宽页面时，一切看起来都不错，但是当我调整窗口大小时，标题中的背景图像以不同于正文中的速度调整大小。这是我用于标题的 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 轴上缩放得越来越小，而在背景图像上，它在两个轴上缩放了一段时间，但在某个点上，它只是水平缩放而不是垂直缩放。任何帮助将不胜感激!

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

Answer 1

抱歉，我可以发表评论，所以我发布了一个答案。

问题是你的标题在 Y 中有一个 30px 的位置。最简单的方法是将该值设置为 0px。 否则，您必须通过删除原始图片的 30 像素来为标题使用第二个背景 img。