Question

我需要将背景扩展到页面底部，它应该适用于短页和长页。

<html>
   <body>
      <div id="container">Container of variable height</div>
   </body>
</html>

CSS

body {
    background: url("background.jpg");
}
#container {
   margin: auto;
   width: 800px;
}

这是一般结构。背景在带有滚动的长页面上工作正常，但在短页面上它在#container下方切断。

如果我添加

html, body {
   height: 100%;
}

它会扩展到短页面的底部，但是如果你在长页面上滚动，背景会在中间切出。

我尝试使用

html, body {
   min-height: 100%;
}

但它被所有浏览器忽略

我可以做些什么让背景在长页和短页上都有效？谢谢！

Answer 1

您可以使用各种background-size css属性。例如假设您的背景图片的大小非常大并且不需要平铺：

body {
    background: url("background.jpg");
    background-size: cover;
}

Answer 2

使用：

body {
  background-image:url('background.jpg');
  background-repeat:repeat-y;
}