背景图像不拉伸[重复]

【问题标题】：Background Image Does not Stretch [duplicate]背景图像不拉伸[重复]
【发布时间】：2013-08-15 00:20:24
【问题描述】：

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

< style type="text/css">


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

 }
 -->
 </style>

【问题讨论】：

你评论了那些东西，从正文中删除 css 评论到结尾

标签： html css

【解决方案1】：

在 CSS3 中，您可以设置背景大小：

body {
   background-size: 100%; 
}

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

Here's a JSFiddle some examples of the property.

【讨论】：

【解决方案2】：

你可以使用（CSS3）：

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

跨浏览器解决方案（

http://jsfiddle.net/4gBXS/

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

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

【讨论】：

【解决方案3】：

使用background-size: 100%;

这将拉伸您的背景图像。

WORKING DEMO

守则：

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

 }

希望这会有所帮助。

【讨论】：