背景圖像沒有延伸到窗口的底部

Question

我的背景圖像沒有一直延伸到窗口的底部。

我已經在CSS中設置了我的背景圖像以及一堆屬性以使其透明。 這是我的CSS：

body {    
    background-image: url("http://www.inc.com/uploaded_files/image/970x450/flatiron-school-1940x900_35912.jpg");    
    background-color: rgba(255, 255, 255, .3);    
    background-repeat: no-repeat;    
    background-size: 100% ;      
    background-blend-mode: color;       
}

Answer 1

將html, body的高度設置為100％並使用background-size: cover將使背景填充頁面。

使用background-position: center center當窗口與窗口的寬高比不同時， background-position: center center將使圖像的數量減少均勻。

 html, body { height: 100%; } body { margin: 0; background-image: url("//placehold.it/1000x800"); background-size: cover; background-position: center center; background-blend-mode: color; } 

Answer 2

嘗試使用：

background-size: cover;

Answer 3

你可以使用background-size: cover; 擴展您的背景圖像，圖像被裁剪，但它看起來很自然。

如果要將所有內容都包含在屏幕中，請嘗試以下操作：

body {    
    background: url("http://www.inc.com/uploaded_files/image/970x450/flatiron-school-1940x900_35912.jpg") center no-repeat;    
    background-color: rgba(255, 255, 255, .3);    
    background-size:100% 100%;     
    background-blend-mode: color;  
}

Answer 4

謝謝你們每一個人的幫助！ 在查看答案后我更新了我的代碼，現在我有以下內容（對於遇到類似我的問題的人）：

  html, body{
   height: 100%;
 }

 body{
   background-image: url("MyImageURL");   
   background-color: rgba(255, 255, 255, 0.3);   
   background-blend-mode: color; 
   background-size: cover;

 }

基本上，添加背景大小：封面; 將html和body高度設置為100％就是訣竅（我必須將兩段代碼組合起來才能工作）。