修复了没有设置高度的背景图像

Question

我有一个 div 元素，它必须有一个固定的背景图像，这样当您滚动时内容就会滚动到它上面。我的问题是我必须为特定的 div 元素设置高度才能看到它。那是因为div.

里面没有任何内容

CSS

#top-banner{
    background-image: url(../img/grey.jpg);
    background-attachment:fixed;
    height:700px;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

HTML

<div class="container-fluid">
    <div class="row" >
        <div class="col-sm-12" id="top-banner"></div>
    </div>
    <div class="row">
        <div class="col-sm-12 text-center" >
            <h1 class="band-name">Lorem Ipsum</h1>
        </div>
    </div>
</div>

这给了我想要的大屏幕：

但是当您缩小浏览器时，就像您在 phone 或平板电脑上一样，div 的高度会将所有内容向下推，使其看起来没有吸引力：

有没有办法不给它一个特定的高度，这样内容就不会在较小的屏幕上被向下推，但仍然有固定的背景图像？

编辑这里有一个 fiddle 可以查看。 http://jsfiddle.net/0xbfhwnt/

我重申：一开始看起来不错，但是当您缩小浏览器时，图像会像预期的那样缩小，但 div 的高度保持不变图片下方的内容而不是与背景图片齐平 div。

Answer 1

您是否考虑过媒体查询方面的问题？

这是第一次迭代：

http://jsfiddle.net/0xbfhwnt/2/

@media (min-width: 400px) and (max-width: 700px) {
 #top-banner{
    height: 200px;   }

}

@media (min-width: 200px) and (max-width: 399px) {
 #top-banner{
    height: 100px;   }

}

更新

因此，使用媒体查询，您可以跟踪主要 div 的大小一直到最小的屏幕大小。

在这个例子中，所有的空格都没有了。

http://jsfiddle.net/0xbfhwnt/7/

@media (min-width: 500px) and (max-width: 800px) {
 #top-banner {
    height: 200px;}
}

@media (min-width: 375px) and (max-width: 499px) {
 #top-banner {
    height: 150px;}
}

@media (min-width: 250px) and (max-width: 374px) {
 #top-banner {
    height: 100px;}
}

@media (min-width: 50px) and (max-width: 249px) {
 #top-banner {
    height: 50px;}
}

当然，min-width和max-width之间的范围越小，过渡就越平滑。

修复了没有设置高度的背景图像

Fixed background image without a set height

html

css

background-image

responsive-design