CSS & Page Size / Footer Help

Hi everyone,

I am new to the forum, but this problem has been with me for a little bit. I have a personal page which has one major flaw (at least) that bugs the crap out of me. The page looks fine at 1024 by 768 resolution, but anything bigger creates a huge blank blue (background color of page) area at the bottom of my page.

The main issue I believe is that I have created a footer that is a fixed distance from the header to get my design. I know my design isn't practical by any means (a bunch of floating divs with nothing in the middle) but I was just trying to get something cool. I don't know if anything is possible with the way I have set it up to remedy this problem, but maybe someone has a thinking outside the box idea. Another thought is that the fixed center background image can be a big source of the problem. Any ideas? Thanks.

The site is: www.andrewgross.us

The relevant code is:
body{background: #336395 url(../i/background.jpg) fixed center no-repeat;}

/* ---------- Structure Divs --------------- */


#header {
height:60px;
width:100%;
background: #000;
}
#contentright {
float:right;
width: 290px;
height:400px;
margin: 0;
padding:110px 10px 10px 20px;
filter:alpha(opacity=95);
-moz-opacity:0.95;
opacity: 0.95;
border-left: 1px #000 solid;
border-right: 1px #000 solid;
background: #fff url(../i/rcb.jpg) no-repeat;

}
#contentleft {
float:left;
width: 270px;
height:435px;
margin: 0;
padding:75px 20px 10px 30px;
filter:alpha(opacity=95);
-moz-opacity:0.95;
opacity: 0.95;
border-left: 1px #000 solid;
background: #336395 url(../i/lcb2.png) no-repeat;
}

#footer{
margin-top:520px;
height:28px;
padding:5px 20px 0 0;
background:#000;
}

If what I think you're wanting is right then this should sort it:


html {
background-color: #000000;
}

Wow, that was so simple. Thanks.... that was what I was looking for...seems so obvious now but I never mentally zoomed out past the body tag. Thanks again.