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

将标题设置为全宽，然后为正文和标题指定相同的背景图像和选项。还要确保背景居中。

现在添加这样的东西。你很可能不得不删除一些！importants。

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

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

我使用http://quirktools.com/screenfly/检查不同的屏幕尺寸

Answer 2

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

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

Answer 3

您是否尝试过对标题和正文进行绝对定位，并将它们设置为窗口的100％宽度和高度。然后将背景图像作为封面。然后你可以创建一个div，它位于远离顶部的位置，因为你的标题应该是隐藏的。

如何使标题背景图像比例与身体背景相同？

3 个答案: