CSS：如何将背景图片拉伸到屏幕的100％宽度和高度？

Question

我有一张名为myImage.jpg的图片。这是我的CSS：

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

因为某种原因，当我这样做时，myImage的宽度会延伸到整个屏幕，但高度只会延伸到页面上其他元素的高度。因此，如果我放置了许多其他元素，

<br>

在我的HTML页面中，如果存在

标签，则高度将增加。如果我的HTML页面仅包含

标签，则不会发生高度变化。

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

那么背景图像的高度将只是一个的高度

<br>

如何使我的背景图片的高度占据用户浏览网页所使用的屏幕的100%？

- SilentDev

Answer 1

你需要将 html 元素的高度设置为 100%。

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

http://jsfiddle.net/8XUjP/

- SomeKittens

Answer 2

如果您不想让背景失去比例，我建议使用background-size: cover;：JS Fiddle

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/

- Derek Story

Answer 3

VH单位可以用于填充视口的背景，也就是浏览器窗口。

(height:100vh;)

html{
    height:100%;
    }
.body {
     background: url(image.jpg) no-repeat center top; 
     background-size: cover; 
     height:100vh;     
}

- Mostafa Norzade

---

虽然这段代码可能回答了问题，但提供有关它如何以及/或为什么解决问题的附加上下文将改善答案的长期价值。 - A. Suliman

Answer 4

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

这样就可以了。

默认情况下，即使是html和body的大小也只有它们所包含的内容那么大，但永远不会超过窗口的宽度/高度。这常常导致非常奇怪的结果。

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

有一些很好的方法可以实现非常好的可缩放全背景图像。

- Kjeld Schmidt

---

你是不是想说 min-height？问题是在问高度，而不是宽度。 - ajp15243