Background web page terpisah dua

Membuat background terpisah dua sehingga bagian paling bawah bisa stretching mengikuti ukuran content.

HTML-nya:

<div id="nonFooter">
<center><img src="images/blank.gif" width="5" height="1800" /></center>
</div>
<div id="footer">
<img src="images/bg_bottom.jpg" />
</div>


CSS-nya:
html
{
height: 100%;
}

body
{
height: 100%;
margin:0px;
padding:0px;
background-image: url(images/bg_mid.jpg);
}
#nonFooter
{
position: relative;
min-height: 100%;
background-image: url(images/bg_top.jpg);
background-repeat: no-repeat;
z-index: 20;
}

* html #nonFooter
{
height: 100%;
}

#footer
{
position: relative;
margin-top: -398px;
z-index: 1;
height: 1px;
}
#footer img {
top: -398px;
z-index: 1;
}