CODEWITHSUNDEEP
htmlcssimage
Juvaria Shahid
Juvaria Shahid

Reputation: 55

Background image not extending to the bottom of the window

My background image is not extending all the way down to the bottom of the window.

I have set my 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;       
}

Upvotes: 5

Views: 3667

Answers (4)

Juvaria Shahid
Juvaria Shahid

Reputation: 55

Thank you everyone for your help! I updated my code after looking through the answers, and I now have the following (for anyone 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 background-size: cover; and setting the html and body height to 100% was the trick (I had to combine both pieces of code for it to work).

Upvotes: 0

yong wu
yong wu

Reputation: 101

You can use background-size: cover; to extend your background image, and the image is cropped, but it is looks natural.

If you want to include everything into the screen, try this:

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;  
}

Upvotes: 2

user4639281
user4639281

Reputation:

Setting the height of html, body to 100% and using background-size: cover will make the background fill the page.

Using background-position: center center will make it cut even amounts off of the image when it is a different aspect ratio than the window.

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

Upvotes: 4

NadiaFaya
NadiaFaya

Reputation: 234

Try using:

background-size: cover;

Upvotes: 2

Related Questions