Html 重新缩放浏览器窗口时，将div和图像与背景盖对齐

我正在创建一个登录页，网站有4个部分：主页，关于，下载，联系。“主页”和“下载”部分有背景图像，这些图像可以正确地延伸到页面的背景。为此，我使用以下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，则将调整其大小

---

-如果一个页面无法容纳该部分，则背景图像会向下延伸到当前部分的末尾。

尝试各种方法后，在注释的帮助下，工作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%;
}

---

尝试<代码>最小高度：100%而不是

高度：100%。具体在哪里？我试过玩这个，但找不到一个可靠的css配置。
下载{minheight:100%；…}
你试过为最大高度为100%的myimage.png添加样式吗；最大宽度：100%；是的，我试过两种建议。