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

我试图使一个网站的页眉和页脚有单独的背景布局。所以我基本上是这样做的：

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标记）。请帮助我，谢谢。

您的问题是在您的背景定义中使用了

contain

。这样可以保持图像的大小与身体一样大，身体保持完整大小

尝试使用repeat-x而不是no repeat，并将背景大小的宽度部分设置为与header元素具有的宽度相同的值

---

这应该可以使它按比例匹配，除非我遗漏了什么。

“不必更改HTML标记”。你的HTML标记是什么？请展示相关部分。实际上这有点不相关，我只需要用CSS设计一个预定义的html样式，所以我希望我不需要添加任何额外的div。我基本上只有两个div：一个用于页眉，一个用于页脚。但这不是重点，对吗？