Question

如何使用CSS调整background-image的大小？

Answer 1

您可以使用CSS3的background-size属性

这是让它在支持它的每个浏览器中都能运行的代码

.foo {
        background-image: url(bg-image.png);

       -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
         -o-background-size: 100% 100%;           /* Opera 9.5 */
    -webkit-background-size: 100% 100%;           /* Safari 3.0 */
            background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */

       -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
}

Answer 2

您可以考虑使用jQuery插件Backstretch。

Answer 3

除了CSS3之外，似乎对于以前的级别（即标准），唯一的方法是将图像制作成正确的大小并设置其背景位置和背景重复属性

Answer 4

您可以使用background-size CSS属性;
但是，值得注意的是旧版本的浏览器可能不支持这一点。

另一种方法是使用<div>和低position:absolute创建新的z-index元素，使其落后于其他相关元素。然后，您可以将此div用作背景图像，并将其重新调整为所需的尺寸，与其前面的主要元素无关。

Answer 5

这是你如何做到的。适用于所有浏览器。

body 
 {

    background-image:url('../back.jpg');
background-repeat:no-repeat ;
 -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
     -o-background-size: 100% 100%;           /* Opera 9.5 */
-webkit-background-size: 100% 100%;           /* Safari 3.0 */
        background-size: 100% 100%;           /* CSS3-compliant browsers */

   -moz-border-image: url(../back.jpg) 0;  
 background-size: cover;  /* Gecko 1.9.1 (Firefox 3.5) */
   }

如何使用CSS调整背景图像大小？

5 个答案: