Html 没有设置高度的固定背景图像

我有一个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>

乱数假文

这为我提供了更大屏幕所需的功能：

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

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

编辑 这里有一把小提琴要托运

---

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

你考虑过媒体查询的问题吗

这里是第一次迭代：

---

更新

因此，使用媒体查询，您可以跟踪主

div

的大小，一直跟踪到最小屏幕大小

在本例中，所有空白都消失了

---

当然，

最小宽度

和

最大宽度

之间的范围越小，过渡就越平滑

请出示你的密码！你试过背景尺寸：包含；或者背景尺寸：封面？我不完全确定我是否理解这个问题——所以你有一个固定的背景图像，当你进入更小的屏幕时，它会把东西往下推？但背景图像是固定的，所以它实际上不应该“向下推任何东西”，因为它超出了文档流。也许创建一个JSFIDLE？我不太明白你想要什么：（你在小提琴和图片中有不同的代码，你能呈现相同的代码吗？你也可以试试@media（最小高度：xxx px）不知道为什么会投反对票。这个答案直接回答了问题。OP说：我希望在较小的屏幕上消除空白。如果我误解了问题，我愿意接受反馈。你没有误解。我的css中已经有媒体查询，并且已经尝试过了，但没有成功。在你的fiddle t的第一次迭代中当屏幕变小时，这里仍然是空白。对。值需要调整。这就是为什么我说“第一次迭代”。但我想知道这个概念是否吸引你。否则我不会追求它。就是这样。糟糕的是，没有其他更短的方法可以做到这一点。我要写很多媒体查询。

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

}

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

}

@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;}
}