CSS：将背景图像拉伸到屏幕的100%宽度和高度？

Question

我有一个图像叫做myImage。jpg。这是我的CSS：

body {
    background-image:url("../images/myImage.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

出于某种原因，当我这样做时，myImage的宽度会延伸到整个屏幕上，但高度只会延伸到页面上其他所有内容的高度。所以如果我把一堆

<br>

在我的html页面，然后高度会增加。如果我的超文本标记语言页面只包含一个

<div id='header'>
    <br>
</div>

那么背景图像的高度就是1的高度

<br>

我如何使我的背景图像的高度100%的屏幕，用户使用它来查看网页？

Answer 1

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

会成功的。

默认情况下，即使是html和body也只和它们所包含的内容一样大，但永远不会超过windows的宽度/高度。这通常会导致相当奇怪的结果。

你可能还想读http://css-tricks.com/perfect-full-page-background-image/

有一些很棒的方法可以实现非常好的和可扩展的全背景图像。

Answer 2

如果你不想让你的背景失去它的比例，我会推荐background-size： cover；

html { 
  background: url(image/path) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

来源：http://css-tricks.com/perfect-full-page-background-image/

Answer 3

您需要将html的高度设置为100%

body {
    background-image:url("../images/myImage.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
html {
    height: 100%
}

http://jsfiddle.net/8XUjP/