Transparent Footer Overlay at bottom of viewport (not page)

[BlackReef]

I am trying to achieve this:

http://bkbdesigngroup.com/istock_footer.htm

Notice how the footer stays at the bottom of the browser window, and not at the bottom of the content?

I've attempted looking at the CSS (view source) but it seems overly dense with code, maybe Im mistaken - it shouldn't require much to make this work.

Notice I would like to keep the transparency as well.

Here is my site and current footer code:

http://dev.electrabike.com/electra/

#main #footer {
z-index:1000;
font-size:11px;
position:absolute;
width:100%;
left:0px;
bottom:0px;
padding:6px 0px;
background:url(../images/bg-black.png);
}
#main #footer span {
float:left;
margin-left:10px;
}
#main #footer label {
float:right;
margin-right:10px;
}
#main #footer label img {
float:right;
position:relative;
margin-left:5px;
margin-top:-1px;
}

[waps2]

Try this

#main #footer {
z-index:1000;
font-size:11px;
position: fixed;
width:100%;
left:0px;
bottom:0px;
padding:6px 0px;
background:url(../images/bg-black.png);
}

[BlackReef]

Originally Posted by waps2

Try this

#main #footer {
z-index:1000;
font-size:11px;
position: fixed;
width:100%;
left:0px;
bottom:0px;
padding:6px 0px;
background:url(../images/bg-black.png);
}

That did the trick! Thanks alot waps2