如何使此背景图像适合我的页面底部答案

【问题标题】：How can I make this background image fit to the bottom of my page如何使此背景图像适合我的页面底部
【发布时间】：2013-06-11 03:12:40
【问题描述】：

我正在使用适合浏览器窗口的可缩放背景图像的网站工作，但在小型浏览器窗口上查看时遇到问题。

当页面最初在一个高大的浏览器窗口上加载时，图像会正确地锚定到浏览器窗口的底部，并在调整窗口大小时进行缩放 - 即，当整个页面都被包含在内时就可以了。但是，如果页面长度超过了初始窗口高度，当页面滚动时，图像会向上滚动，留下一个空隙。

这里有一个页面来演示（先用高窗口，然后用短窗口，刷新并向下滚动查看问题）：

如何使背景图像适合浏览器窗口的底部和/或在滚动时不留空隙？

【问题讨论】：

【解决方案1】：

您需要指定一个宽度\高度，以便它可以正确调整自身大小。

既然你已经使用css设置背景，你可以使用CSS3 Background Size。大多数现代浏览器都支持它，如下所示：

#about-us {
    background-size: 100%;
}

或者，您可以使用正确的图像标签和样式（宽度\高度），占 100%

参考：

希望这会有所帮助。

【讨论】：

啊，我明白了。感谢凯尔的信息。由于浏览器窗口的宽度通常大于高度，因此设置 100% 宽度可能是个问题，因为所有图像都是横向格式。我会用你提供的信息做一些试验，看看会发生什么！
只设置height: 100%; 是否合理？如果它们总是比它们高，那么设置高度将确保始终有图像以较低的分辨率占据整个屏幕。