2

我已经使用 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;
}

当我调整浏览器大小时，图像不会根据屏幕大小调整大小。我不知道如何使它响应。所以请任何人都可以帮我解决这个问题。提前致谢。

4

4 回答 4

5

尝试这个

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;
}
于 2013-06-10T08:28:29.060 回答
2

您应该使用该background-size属性并将其设置为cover喜欢以下简写：

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

在这里阅读更多

于 2013-06-10T07:31:35.417 回答
2

您可以使用 CSS3background-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;
}

欲了解更多信息

于 2013-06-10T07:34:02.860 回答
1

尝试这个background-size:100%;

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

于 2013-06-10T07:32:19.747 回答