CSS 我如何水平重复背景图像并始终将其保持在网页底部？

【问题标题】：CSS How do i repeat a background image horizontally and always keep it at the bottom of a webpage?CSS 我如何水平重复背景图像并始终将其保持在网页底部？
【发布时间】：2015-04-15 11:48:00
【问题描述】：

我是 CSS 新手，正在修改一些选项。我希望在我的网页底部水平重复一张名为“toplayer.jpg”的图片。我在外部样式表中使用了这段代码。图案水平重复……但它浮动到页面顶部。

body {
    background-image: url("../Images/toplayer.jpg");
    background-position: bottom;
    background-repeat: repeat-x;
}

对此菜鸟的任何建议将不胜感激。谢谢。

【问题讨论】：

标签： css repeat background-position

【解决方案1】：

你的背景声明应该可以工作，我猜问题是body标签没有高度：

html,body {
  height: 100%;
}
body {
  background-image: url("https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg");
  background-position: bottom;
  background-repeat: repeat-x;
}

【讨论】：

也值得一提的是，它不会在页面底部显示背景图像，而是在 viewport 底部显示。解决方法是在<body> 中使用包装器<div> 并将背景图像添加到该元素..
@HashemQolami 我认为如果 OP 希望背景显示在页面底部，最好的办法是删除 body 标签上的高度，让它随内容流动。
@web-tiki 是的，但在正文和 html 上也是如此。