固定的背景圖像沒有設置高度

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> 

這給了我什麼，我想要更大的屏幕：

但隨着喲ü縮小瀏覽器，就像你是一個手機或平板電腦上，對於該div高度推動所有內容下跌使得它看起來沒有吸引力：

有沒有辦法不給它一個特定的高度，內容不是在較小的屏幕上按下，但仍然有固定的背景圖像？

編輯 這裏是一個小提琴結帳。 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; } 

} 

---

UPDATE

因此，使用媒體查詢，您可以跟蹤的主要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，之間的更平滑的過渡將是。