CSS Background to Stretch to Window Bottom

CSS Background to stretch to window bottom?

Add these rules:

body, html{
    height:100%;
    margn:0;
    padding:0;
}

#container{
    min-height:100%;
}

However, min-height isn't fully supported in all browsers. If you use height instead it will cause problems if the content in container is higher than the page. To work around this, you could create a 100% x 100% div as a duplicate of body, give it a background image that is your transparent overlay, and set its overflow to auto, so it behaves like a second body tag.

HTML:

<body>
    <div id='body2'>
        //container
    </div>
</body>

CSS:

body{
    margin:0;
    padding:0;
    background:_image_;
}

#body2{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    overflow:auto;
    background:url(transparent.png) center top repeat-y;
}

transparent.png would be containerWidth x 1px filled with the rgba color you wanted as the container background.

How to make website stretch to bottom of screen

No JS is needed for this. You have a few options. I'd recommend setting

html, body {
  height: 100%;
}
body {
  min-height: 100%;
}

Your body is now taking 100% of screen height. Then you'll need to adjust your images and remove the specified height you have set of 650px

I'm a fan of using vh. You could set your image containers to be 100vh. It'll set them to be 100% of viewport height. It just depends on what your browser limitations are. http://caniuse.com/#feat=viewport-units

I would also recommend editing your #footer styling with these rules.

#footer {
    bottom: 0px;
    overflow: auto;
    //top: 94%;
}

After you stretch your images to 100% of viewport height, you'll notice that footer looks a bit odd. This should fix that for you.
Sample Image

Stretch and scale CSS background

For modern browsers, you can accomplish this by using background-size:

body {
    background-image: url(bg.jpg);
    background-size: cover;
}

cover means stretching the image either vertically or horizontally so it never tiles/repeats.

That would work for Safari 3 (or later), Chrome, Opera 10+, Firefox 3.6+, and Internet Explorer 9 (or later).

For it to work with lower verions of Internet Explorer, try these CSS:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

How do I stretch a background image to cover the entire HTML element?

<style>
    { margin: 0; padding: 0; }

    html { 
        background: url('images/yourimage.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>

How to stretch the background image to fill a div

Add

background-size:100% 100%;

to your css underneath background-image.

You can also specify exact dimensions, i.e.:

background-size: 30px 40px;

Here: JSFiddle

Stretch and scale a CSS image in the background - with CSS only

CSS3 has a nice little attribute called background-size:cover.

This scales the image so that the background area is completely covered by the background image while maintaining the aspect ratio. The entire area will be covered. However, part of the image may not be visible if the width/height of the resized image is too large.

CSS Background to Stretch to Window Bottom