html - div全宽响应式背景图片

我试图弄清楚如何使div全宽和响应的背景图像。背景图像在页面的整个宽度上都在扩展(并且是自适应的)，但是图像的高度不是其整个高度。好像它已经被切断了。我正在使用bootstrap框架，而尝试执行此操作的原因是我想在图像上覆盖一些文本。我已经尝试了很多不同的方法，但似乎无法弄清楚，帮助!

<div class="bg-image">
  <div class="container">
    <div class="row-fluid">
      <div class="span12">
        <h1>This is some text</h1>
      </div>
    </div>
  </div>
</div>


  .bg-image {
  background: url(img/image.jpg) no-repeat center top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  max-height: 450px;
  }

最佳答案

这是获得所需设计的一种方法。

从以下HTML开始:

<div class="container">
    <div class="row-fluid">
        <div class="span12">
            <div class="nav">nav area</div>
            <div class="bg-image">
                <img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg">
                 <h1>This is centered text.</h1>
            </div>
            <div class="main">main area</div>
        </div>
    </div>
</div>

请注意，背景图像现在是文档常规流程的一部分。

应用以下CSS:

.bg-image {
    position: relative;
}
.bg-image img {
    display: block;
    width: 100%;
    max-width: 1200px; /* corresponds to max height of 450px */
    margin: 0 auto;
}
.bg-image h1 {
    position: absolute;
    text-align: center;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
}
.nav, .main {
    background-color: #f6f6f6;
    text-align: center;
}

运作方式

图像设置为宽度为100％的常规流量内容，因此它将根据父容器的宽度进行调整。但是，您希望高度不超过450px，这对应于1200px的图像宽度，因此请将图像的最大宽度设置为1200px。您可以使用display: block和margin: 0 auto保持图像居中。

通过使用绝对定位将文本绘制在图像上。在最简单的情况下，我将h1元素拉伸(stretch)为父级的完整宽度，并使用text-align: center使文本居中。使用顶部或底部偏移量将文本放在需要的位置。

如果横幅图像的宽高比有所不同，则需要使用jQuery / Javascript动态调整.bg-image img的最大宽度值，但是除此之外，这种方法还有很多其他用途。

观看演示:http://jsfiddle.net/audetwebdesign/EGgaN/