Alright, I know this one has been beaten to death but here goes...
I have a theme that is basically laid out like this (I'll excerpt the main points).
page {
background: url("<?php bloginfo('stylesheet_directory'); ?>/images/bg.png") top repeat-y ;}
<div id="header"> <-- top header image/ingo
<div id="page"> <-- used for "faux column" background as per above
<div id="content> <-- content of posts/pages
blah
</div>
<div id="sidebar"> <-- obligatory sidebar to the right of the content
ul etc.
</div>
<div id="footer"> <-- no problems here clear: both lands on the bottom
site name/powered by..
</div>
</div> <-- end of "page" where background "works".
Here's where I get messed up. If I end the "page" div after the footer all is well and the faux column extends to the end of the footer. While this is all fine and dandy, if I wanted that, but I have a transparent png at the footer that looks strange. If I end the "page" div before the footer and the contents of the "content" div is longer than the sidebar, I end up with the background image ending just after the sidebar. I know this is not how a faux column should work. What am I missing? I'm fairly new to designing with css as I usually muck around with backend than front end. I know I'm leaving out a lot of detail, but I'll fill in any blanks. Thanks in advance.