如何展开背景图片来覆盖整个HTML元素?

我想获得HTML元素(body,div等)的背景图像来扩展其整个宽度和高度。

没有太多的运气。 除了作为背景图像之外,还有其他可能吗?

我目前的CSS是:

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

提前致谢。

编辑:我不热衷于维护加布里埃尔的build议CSS,所以我改变了页面的布局。 但是,这似乎是最好的答案,所以我把它标记为这样。

 <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> 

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

总之你可以试试这个….

 <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> 

它对我来说工作得很好。

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

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

编辑:我build议基本上是什么在加布里埃尔的链接。 所以试试:)

要扩展@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; } 

如果你有一个大的风景图像,这个例子在这里调整了纵向模式下的背景,使它显示在最上面,底部留下空白:

 html, body { margin: 0; padding: 0; min-height: 100%; } body { background-image: url('myimage.jpg'); background-position-x: center; background-position-y: bottom; background-repeat: no-repeat; background-attachment: scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media screen and (orientation:portrait) { body { background-position-y: top; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; } } 

以下代码主要用于实现问题效果:

 body { background-image: url('..http://img.dovov.combg.jpg'); background-repeat: no-repeat; background-size: 100%; } 

如果您需要在调整屏幕大小的同时伸展背景图片,并且不需要与旧浏览器版本兼容,则可以完成这项工作:

 body { background-image: url('..http://img.dovov.comimage.jpg'); background-repeat: no-repeat; background-size: cover; } 
 background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; 

你不能在纯粹的CSS。 有一个图像覆盖整个页面后面的所有其他组件可能是你最好的select(看起来像这是上面给出的解决scheme)。 无论如何,无论如何,这可能会看起来很糟糕。 我会尝试一个足够大的图像来覆盖大多数的屏幕分辨率(比如高达1600×1200,比它更稀less),限制页面的宽度,或者只是使用一个图片。