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

我有一个叫做 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% 的屏幕，用户是用来查看网页？

393389 次浏览

小开

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

Will do the trick.

By default, even html and body are only as big as the content they hold, but never more than the width/height of the windows. This can often lead to quite strange results.

You might also want to read http://css-tricks.com/perfect-full-page-background-image/

There are some great ways do achieve a very good and scalable full background image.

小开

最佳答案

You need to set the height of html to 100%

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

http://jsfiddle.net/8XUjP/

小开

I would recommend background-size: cover; if you don't want your background to lose its proportions: 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;
}

Source: http://css-tricks.com/perfect-full-page-background-image/

小开

The VH unit can be used to fill the background of the viewport, aka the browser window.

(height:100vh;)

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