CSS 如何水平重复背景图片并始终将其放在网页底部？

Question

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

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

对此菜鸟有任何建议，我们将不胜感激。谢谢。

Answer 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;
}

CSS 如何水平重复背景图片并始终将其放在网页底部？

CSS How do i repeat a background image horizontally and always keep it at the bottom of a webpage?

css

repeat

background-position