Question

我使用twitter bootstrap制作网页。我已经通过CSS在背景中插入了一个图像，如下所示。

<div class="container-fluid">
    <div class="row-fluid">
        <section id="wrapper">

        </section>
    </div> 
</div>

CSS如下：

section#wrapper{ 
    max-width:700px; 
    background-image:url("img/crane.png");
    min-height:525px;
}

当我调整浏览器大小时，图像不会根据屏幕大小调整大小。我没有得到如何使其响应。所以请任何人帮我解决这个问题。提前谢谢。

Answer 1

试试这个

section#wrapper{ 
    background:url("img/crane.png") no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

Answer 2

您应该使用background-size属性并将其设置为cover，如下所示：

div.withBackground {
    background:  url('http://image.url/img.png') center center cover;
}

了解更多here

Answer 3

您可以将CSS3 background-size与cover一起用作值，而不是100%属性用于您网站的整页自适应背景图片

html { 
  background: url(bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

For more info

Answer 4

试试这个background-size:100%;

但并非所有浏览器都可以使用较低版本的浏览器无法识别background-size

为什么背景图像根据屏幕尺寸没有响应？

4 个答案: