Footer at bottom of browser except when I scroll

Question

I'm having a weird footer issue.

http://jsfiddle.net/YGAvd/

The clouds at the bottom of the page will stick to the bottom of the browser window if I expand or shrink the window. BUT when I scroll down, the footer winds up in the middle of the page. This isn't a problem on any of my other pages because they all fit in a 900x600 window before a scroll bar appears.

Is there a way to keep my footer at the bottom of the window even when I scroll (so it would always there under the content) without messing up the code for all the other pages that share the CSS document?

Answer 1

In the footer CSS rule change 'position: absolute;' to 'position: fixed;'

you may also have to play with a few other def's but this works.

check it out

Here is my final footer rule

footer {
    position: fixed;
    color: black;
    width: 100%;
    height: 4.6em;
    background-image: url(http://img.photobucket.com/albums/v410/justice4all_quiet/bottom_clouds.jpg);
    background-repeat: repeat-x;
    background-color: e0e0e0;
    z-index: -999;
    overflow: hidden;
    bottom: 0px;
}

Answer 2

Don't put the background image in the footer.... make it the body background image!

Then make your body tag look like this:

body {
    line-height: 1;
    overflow: auto;
    background-image: url(http://img.photobucket.com/albums/v410/justice4all_quiet/bottom_clouds.jpg);
    background-repeat: repeat-x;
    background-position:bottom center;
    background-attachment:fixed;
    background-color: #b1ceff;
    font: normal 95% Sathu, Verdana, Arial, Tahoma;
    text-align: center;
    height: 100%;
}

Don't forget to remove the code from your footer for the image. ALSO, remove the background color in the footer to avoid any issues.