背景图像没有延伸到窗口的底部

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％就是诀窍（我必须将两段代码组合起来才能工作）。