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

这会拉伸你的背景图片。

<强> 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%;

 }

希望这有帮助。

Answer 2

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

body {
   background-size: 100%; 
}

它适用于Chrome＆gt; = 3.0，Firefox＆gt; = 3.6，IE＆gt; = 9.0和Opera＆gt; = 10.

Here's a JSFiddle some examples of the property.

Answer 3

您可以使用（CSS3）：

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

跨浏览器解决方案（＆lt; IE9）

http://jsfiddle.net/4gBXS/

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

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

背景图像不伸展

3 个答案: