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

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
}

在正文的标题部分是正文的全宽并覆盖背景图像。该文档的主体包含两列：一列包含文本，另一列包含幻灯片。

我遇到的问题是，如果我缩放＆＃39; in＆＃39;在浏览器窗口中，第1列和第2列部分浮动到背景图像中，并且看起来并不是很好。是否可以在用户滚动时调整html背景图像的大小，以便body和html图像保持相对位置？关于如何完成预期结果的任何其他建议？我看到的帖子似乎处理标签中的图像而不是标签。

Answer 1

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

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

Answer 2

如果我正确理解你的问题，CSS Tricks有一个很好的a variety of ways to scale a background image教程。如果你想要纯粹的CSS方式，请使用：

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

确保使用浏览器前缀以确保它适用于所有平台。