背景大小 - 封面

我試圖拉伸圖片全屏（封面）：http://www.bootply.com/114850 背景大小 - 封面

我有一個簡單的菜單和操作按鈕發出呼叫，但圖像僅覆蓋了菜單，並停在那裏。

部分樣式如下。

.section-1 { 
    min-height: 100%; 
    background-image: url(http://i.imgur.com/fGrTemz.jpg); 
    background-position: center bottom; 
    background-repeat: no-repeat; 
    background-size: cover; 
    overflow: auto; 
}

我失去了什麼？

來源

2014-02-18 The Mini John

添加

html, body { 
    height:100%; 
}

部分-1被拉伸到它的父（HTML /機構）的高度不具有的高度設置，因此不知道是什麼高度。

來源

2014-02-18 19:40:04 joshhunt

嘗試過，但它仍然只停留在導航欄上。你可以在我提供的Bootply上測試它。 –

你確定嗎？我只是試了一遍，它適用於我？我在Bootply上試了一下......我會看看我是否可以給你發送截圖。 – joshhunt

@ TheMiniJohn：它確實有用。案例和觀點：http：//www.bootply.com/114866 –

將您的最小高度從百分比更改爲像素。

.section-1{ 
    min-height:500px; 
}

來源

2014-02-18 19:37:21

工作，但爲什麼不是100％的工作？ –

喲你.content-holder指定position:absolute，使其從內容流中移除。因此，其容器<section>只能縮小其高度以適合<nav>元素。

嘗試從.content-holder刪除position:absolute。如果您將position:absolute添加到.section-1，則背景將變爲全屏。

來源

2014-02-18 19:43:11 charlee

以下內容添加到您的CSS：

position: Absolute

所以你的CSS將

.section-1 { 
    min-height: 100%; 
    position: absolute; 
    background-image: url(http://i.imgur.com/fGrTemz.jpg); 
    background-position: center bottom; 
    background-repeat: no-repeat; 
    background-size: cover; 
    overflow: auto; 
}

來源

2014-02-18 19:43:21 malkassem