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

【问题标题】：Resizing html tag background image to scale with screen using css使用 css 调整 html 标签背景图像的大小以随屏幕缩放
【发布时间】：2014-09-13 23:31:04
【问题描述】：

我有一个在 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 列部分会浮动到背景图像中，看起来一点也不好看。是否可以在用户滚动时调整 html 背景图像的大小，以使主体和 html 图像保持相对位置？关于如何实现预期结果的任何其他建议？我看到的帖子似乎处理的是标签而不是标签中的图像。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案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;
}

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

【讨论】：