使用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
}

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

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

Answer 1

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

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

Answer 2

如果我正确地理解了你的问题，CSS有一个很好的缩放背景图像的各种方法教程。如果您想要一种纯粹的CSS方式，请使用以下方法：

html {
  background: url('../images/htmlbackground.png') center center no-repeat fixed;
  background-size: cover;
}

确保您使用浏览器前缀，以确保它在所有平台上都能工作。