如何展开背景图片来覆盖整个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），限制页面的宽度，或者只是使用一个图片。
