Fake and scalable 100% height “background” image doesn’t work in IE6

I have scoured the internet for and found the solution for a 100% height page design (e.g. “html, body {margin:0;padding:0;border:none;}, *html body {height:100%;}/* for IE6 */,” etc.).

My intention is to create a fully elastic theme for WordPress (https://www.gaycouplesgetmarried.com). The problem occurs with the “drop shadow” behind the main body of the page. It works in Saf/FF but not in IE6,7. My workaround is to serve a simple non-scaling background repeat-y to IE, but I would prefer not to.

I’ve been able to make the same graphic stretch to the full 100% height (it’s a 1px tall graphic, 812px wide) in IE6, but only as a static xhtml page.

When I try the same thing in my WordPress Sandbox in IE6 the graphic stops well short of the footer, where it should disappear behind. It’s currently in the header.php, but I’ve also placed it in the footer.php, as well as the index.php and this theme’s “single.php” (I’m cannibalizing an existing theme).

Can a graphic be forced to 100% height of the viewport in IE6 if it’s part of a WP template? I’m told that anything that can be done with XHTML/CSS can be done on WP. But so far I can’t do this.

(I haven’t completed validating the theme. My IE6 hacks clearly don’t validate and there’s a missing UL that I believe is a relic from the original theme.)

Thank you, thank you, thank you.

mc