CSS：将背景图像拉伸到屏幕的100％宽度和高度？ [英] CSS: stretching background image to 100% width and height of screen?

问题描述

我有一个图片叫myImage.jpg。这是我的CSS：

I have an image called myImage.jpg. This is my CSS:

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

由于某些原因，当我这样做时，myImage的宽度拉伸整个屏幕，但高度只有伸展直到页面上的其他一切的高度。所以如果我把一堆

For some reason, when I do this, the width of myImage stretches across the entire screen but the height only stretches until the height of everything else on the page. So if I put a bunch of

<br>

，那么高度会增加。如果我的HTML网页只包含一个

in my html page, then the height will increase. If my HTML page consists only of a

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

那么背景图片的高度只会是一个的高度

then the height of the background image would just be the height of one

<br>

如何使我的背景图片的高度为用户正在使用的屏幕的100％查看网页

How do I make the height of my background image 100% of the screen which the user is using to view the webpage?

推荐答案

您需要设置 html 到 100％

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

http://jsfiddle.net/8XUjP/

这篇关于CSS：将背景图像拉伸到屏幕的100％宽度和高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！