全屏背景圖像與頁腳位置產生衝突

Question

因此，我正在嘗試做兩件能夠獨立運行的事情，但我在將它們集成在一起時遇到了問題。首先，這裏有一個鏈接到該網站：http://ericbrockmanwebsites.com/dev4

創建使用

html { 
    min-height:100%; 
    background-size: cover; 
    background-image: url(images/bg.jpg); 
    background-repeat: no-repeat; 
    background-position: center bottom; 
} 

創建停留在頁面的底部，即使沒有內容，這通常需要一個頁腳全屏背景圖片是這樣的：

html { 
    height:100%; 
} 

body { 
    height:100%; 
} 

.container { 
    min-height:100%; 
} 

#footer { 
    clear:both; 
    position:relative; 
} 

的問題是，爲了使頁腳留在底部的HTML的高度/身體需要爲100％來定義，但除非我使用最小高度定義它們價值，背景圖像只包括當它加載屏幕時。這意味着如果/需要向下滾動時，背景圖像只能下到屏幕底部加載的位置。

我已經玩了幾個小時，但似乎無法找到解決辦法。我錯過了明顯的東西嗎？

Answer 1

首先，height和min-height不互相排斥。沒有理由不能同時使用兩者。至於頁面長於可用空間的背景滾動，你試過background-attachment: fixed？