html - 使用 css 调整 html 标签背景图像的大小以随屏幕缩放

Question

我在 html css 样式表中有一个在屏幕上显示全宽的图像:

html {
    background-image: url('../images/htmlbackground.png') ;
    background-repeat: none;
    width: 100%;
}

正文宽度设置为 70%。正文的 CSS 代码是:

body {
    width: 70%;
    margin: 0 auto 2em;
    font: 100% Georgia, "Times New Roman", Times, serif;
    color: #000000
}

在主体的标题部分是整个主体的宽度并覆盖背景图像。文档的主体包含两列:一列包含文本，一列包含幻灯片。

我遇到的问题是，如果我在浏览器窗口中“放大”，第 1 列和第 2 列部分会 float 到背景图像中，看起来一点也不好。是否可以在用户滚动时调整 html 背景图像的大小，以便正文和 html 图像彼此保持相对位置？关于如何实现预期结果的任何其他建议？我看到的帖子似乎处理标签中的图像而不是标签。

Answer 1

尝试使用 background-size 属性拉伸(stretch)背景图像以完全覆盖内容区域:

html {
    background-image: url('../images/htmlbackground.png') ;
    background-repeat: none;
    width: 100%;
    background-size: 100% 100%;
}