Stuck on sticky footer CSS issue

Question

I know there are several other questions about the sticky footer, but none have seemed to help me get to a solution for my problem. Here is the template in question:

http://blog.campquiet.com/stack/

Basically I would like the background with the transparent side bars to extend to the bottom of the browser window. The footer (copyright info) should always be at the bottom of the screen as well, even if there isn't enough content to push it that far).

Any suggestions??

Update Maybe I wasn't as clear as I needed to be. Basically I'm trying to accomplish what is seen here: hxxp://www.cssstickyfooter.com/

I haven't been able to get that working in my template.

Answer 1

You need to set the body and outer container to 100% height. This answer may help you: http://stackoverflow.com/questions/485827/css-100-height-with-padding-margin

Answer 2

I'm not really sure I understand what you're asking, but to keep the footer always at the bottom, perhaps try something like this

#footer{
    position: fixed;
    bottom: 0; /* Keeps the footer glued to the bottom of the page */
    z-index: 9999; /* Keeps the footer on top of all other elements */
}

For the background, try to apply the CSS to the body tag?

body{
    background: url(assets/images/bg_clouds.jpg) fixed 0 0;
}

You can apply extra settings for the background (like position & repeat) to get it to look like it is currently. Anyway, if this doesn't answer your question, please help me out with a more detailed explanation of your question.

Hope that helps.

UPDATE

I played around with Firebug to edit your CSS. I think if you get rid of the background css under html, body {} and add this to your body {}

body {
   background: url("assets/images/bg_clouds.jpg") repeat-x fixed 0 0 #F0F4F7;
}

... it will keep the background static even if you scroll. It will always be there. Make sure you have fixed instead of scroll