将div和图像对齐到浏览器窗口的rezoom上的背景封面

Question

我正在创建一个目标网页，并有4个网站部分：主页，关于，下载，联系人< / strong>即可。部分主页和下载具有正确拉伸页面背景的背景图像。我使用以下css：

.download {
  height: 100%;
  background: url(../img/image.jpg) no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

下载部分包含以下内容：

  <section id="download" class="download content-section text-center">
        <div class="download-section">
            <div class="container">
                <div class="col-lg-8 col-lg-offset-2">
                    <h2>Header</h2>
                    <div>Text</div>
                </div>
                <img src="img/myimage.png" />
            </div>
        </div>
    </section>

在21英寸的大屏幕上看起来很不错，但是当我调整窗口大小时，下载部分的元素会超出背景图像并进入接触部分。

我怎样才能确保所有元素都正确对齐，即： - 下一部分的元素上方不显示一个部分的元素 - 如果不需要在下一部分显示，则调整myimage.png的大小 - 如果该部分不适合一页，则背景图像会向下延伸直到当前部分结束。

Answer 1

尝试了各种各样的事情并在评论的帮助下，这里是工作的CSS：

.download {
  min-height: 100%;
  background: url(../img/image.jpg) no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

.download img {
  max-width: 100%;
}