移動設備上的全屏幕背景圖像

Question

我在主頁上創建了HTML/CSS全屏背景。我的問題是用戶需要滾動才能看到頁腳，當我縮小屏幕時，我會看到圖像下面有一個白色區域。

任何人都可以提供一個解決方案，使背景圖像中心/響應，同時保持頁腳在屏幕下方。當我談到頁腳，我不是指粘

網站：http://directbh.nl/ikbenzf/index_temp.html

Answer 1

試試這個

height: 100vh; 
width: auto; 
position: relative; 
transform: translateX(-50%); 

或者你可以使用它作爲一個背景：網址（「image.jpg文件」）中心覆蓋不重複;

Answer 2

您可以使用圖像作爲.page-container中的背景並添加以下css。無論圖像的路徑是什麼。

.page-container { 
background: url(../images/doctor.jpg) no-repeat top center; 
background-size: cover; 
} 

Answer 3

我認爲頁腳需要有百分比高度和主要內容和標題。

.page-footer { 
    min-height: 8%; 
}