CSS - 相对于内容的页眉/页脚背景

Question

我正在尝试制作一个网站的布局，该网站具有单独的页眉和页脚背景。所以这基本上就是我的做法：

body{
    background: url(images/header.png) top center no-repeat,
            url(images/footer2.png) bottom center no-repeat,
                url(images/bg.jpg) fixed;
    background-size: contain, contain, auto;
}

我选择这样做的原因是因为当我应用页眉和页脚（而不是正文）的背景时，背景无法覆盖屏幕的宽度。但是有这个错误：当我放大或缩小时，只有内容的大小发生变化，而背景的大小保持不变，如下面的屏幕截图所示：

在这种情况下，什么是最好的解决方案？我正在寻找一个纯CSS解决方案（不必改变HTML标记）。请帮帮我，谢谢。

Answer 1

您的问题是在后台定义中使用contain。这使得图像的大小与身体一样大，身体保持完整的大小。

尝试使用repeat-x而不是no-repeat，并将background-size的width部分设置为与header元素的宽度相同的值。

除非我遗漏了某些东西，否则应该使它与比例相匹配。