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

问题描述：

我想要获得一个HTML元素（body，div等）的背景图像来伸展它的整个宽度和高度。如何展开背景图片来覆盖整个HTML元素？

没有多少运气。除了作为背景图像之外，还有可能还是需要以其他方式进行操作？

我现在的CSS是：提前

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

感谢。

编辑：我不热衷于在Gabriel的建议中维护CSS，所以我改变了页面的布局。但是，这似乎是最好的答案，所以我把它标记为这样。

当然，你可以使用JavaScript来动态地做到这一点，但这可能比gabriel1836链接建议的CSS黑客更糟。 – 2008-10-25 04:42:53

要保留图像的高宽比，应使用“background-size：cover;”或“background-size：contains;”。我已经构建了一个在IE8中实现这些值的polyfill：http://github.com/louisremi/background-size-polyfill – 2012-12-06 14:32:02

答

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

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

编辑：我的建议基本上是什么在gabriel的链接。所以试试:)

至少十年前，我看到了这种技术的实际应用。我无法想象它现在还不行。 – eyelidlessness 2008-10-25 03:51:37

答

你不能在纯粹的CSS。将图片覆盖整个页面后面的所有其他组件可能是您最好的选择（看起来像是上面给出的解决方案）。无论如何，无论如何，它可能会看起来很糟糕。我会尝试使用足够大的图片来覆盖大多数屏幕分辨率（比如1600x1200，比它更稀少），限制页面的宽度，或者仅使用图片。

答

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

答

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

太棒了，这是正确的答案。它可能不适用于IE浏览器，但我只针对我的项目的webkit，所以这是完美的:) – aehlke 2011-03-24 02:37:07

答

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

这也可以作为HTML元素或CSS文件中的样式标签。 – Nathan 2011-03-16 20:29:29

这是有史以来最好的解决方案。 – AFD 2012-04-20 10:13:31

答

总之你可以试试这个....

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

它对我来说工作得很好。

答

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;

答

如果你有一个大的景观形象，在这里这个例子调整大小在纵向模式的背景下，使之显示在顶部，底部留下空白：

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('../images/bg.jpg'); 
    background-repeat: no-repeat; 
    background-size: 100%; 
}

答

如果需要伸展你的背景图片，而调整屏幕，你不需要与旧版本的浏览器的兼容性，这将做的工作：

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

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

相关推荐