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

```

Answer: 
Setting the height of `html, body` to 100% and using [`background-size: cover`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Values) 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.

```css
html, body {
  height: 100%;
}
body {
  margin: 0;
  background-image: url("//placehold.it/1000x800");
  background-size: cover;
  background-position: center center;
  background-blend-mode: color;   
}
```
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;  
}

```