html - 背景图像不拉伸

Question

我收到了这段代码，寻找如何在 HTML 中为我的页面部分拉伸背景图像，但它不起作用。我究竟做错了什么？

< style type="text/css">


<!--
body {
    background-image: url(at4.jpg);
    background-repeat: no-repeat;
    height: 100%;
         width: 100%;

 }
 -->
 </style>

Answer 1

利用background-size: 100%;

这将拉伸您的背景图像。

工作演示

编码：

body {
    background-image: url(http://www.google.co.in/images/srpr/logo4w.png);
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    background-size: 100%;

 }

希望这可以帮助。

Answer 2

在 CSS3 中，您可以设置 background-size ：

body {
   background-size: 100%; 
}

它适用于 Chrome >= 3.0、Firefox >= 3.6、IE >= 9.0 和 Opera >= 10。

这是一个JSFiddle属性的一些示例。

Answer 3

您可以使用（CSS3）：

background-size:cover（将裁剪）或background-size: 100%;（将拉伸）

跨浏览器解决方案（< IE9）

http://jsfiddle.net/4gBXS/

#background {
    width: 100%; 
    height: 100%; 
    left: 0px; 
    top: 0px; 
}

.stretch {
    width:100%;
    height:100%;
}