Geek Answers Handbook

The background image does not extend to the bottom of the window

My background image does not extend all the way to the bottom of the window.

I set the background image in CSS along with a bunch of properties to make it transparent. This is my 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;       
}
+4
source share
4 answers

Setting the height html, bodyto 100% and using it background-size: coverwill make the background fill the page.

Use background-position: center centerwill result in it being cut even from the image if it differs from the format.

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

Try using:

background-size: cover;
+2
source

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;  
}
+2
source

Thank you all for your help! I updated my code after looking at the answers, and now I have the following (for those who had a problem similar to mine):

  html, body{
   height: 100%;
 }

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

 }

Basically, adding a background size: cover; and setting html and body height to 100% was a trick (I had to combine both code snippets to make it work).

0
source

More articles:


All Articles