如何拉伸背景图像以覆盖整个HTML元素？

Question

我正在尝试获取HTML元素(body,div等)的背景图像以拉伸其整个宽度和高度.

没有太多运气.除了作为背景图像之外,它是否可能或者我必须以其他方式做到这一点？

我目前的CSS是:

body {
    background-position: left top;
    background-image: url(_images/home.jpg);
    background-repeat: no-repeat;
}

提前致谢.

编辑:我并不热衷于在Gabriel的建议中维护CSS,所以我改变了页面的布局.但这似乎是最好的答案,所以我将其标记为这样.

Answer 1

<style>
    { margin: 0; padding: 0; }

    html { 
        background: url('images/yourimage.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>

Answer 2

使用该background-size属性:http://www.w3.org/TR/css3-background/#the-background-size

Answer 3

总之,你可以尝试这....

<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >

我用过少量css和js的地方......

<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>

它对我来说很好.

Answer 4

不确定是否可以拉伸背景图像.如果您发现在所有目标浏览器中都不可能或不可靠,您可以尝试使用z-index设置为较低的拉伸img标记,并将位置设置为绝对,以便其他内容显示在其上.

让我们知道你最终做了什么.

编辑:我建议的基本上是加布里埃尔的链接.所以尝试:)

Answer 5

要扩展@PhiLho答案，您可以将超大图像（或任何大小的图像）居中放置在页面上，其中包括：

{ 
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

或者，您可以使用背景颜色与图像背景相匹配的较小图像（如果是纯色）。这可能适合或可能不适合您的目的。

{ 
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

Answer 6

如果您需要在调整屏幕大小时拉伸背景图像，并且不需要与旧版浏览器版本兼容，则可以使用以下方法：

body {
    background-image: url('../images/image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}