Need help with double background image css

Yo peeps, I'm having a hell of a time with this layout I'm working on.

Basically, I have a design that needs two background images. One of the images doesn't repeat, as it's the bottom part of the header graphic, the other design needs to repeat to fill the space that articles/pages take up. I was able to use css3 to get it working just dandy in Chrome, and Firefox, but the site is totally broken in IE. Here's the code I used that works in firefox/chrome:

#wrapper {
	background-image: url(../img/wrapper-top.jpg), url(../img/wrapper-bottom.jpg);
	background-repeat: no-repeat, repeat-y;
	background-position: top, bottom;
	min-height: 307px;
}

Code (markup):

So, i tried a workaround for IE, by nesting the two images in two different divs using this css:

#wrapper_top {
	background-image: url(../img/wrapper-top.jpg);
	background-repeat: no-repeat;
	background-position: top;
	min-height: 306px;
	margin: 0px;
}

#wrapper_bottom {
	background-image: url(../img/wrapper-bottom.jpg);
	background-repeat: repeat-y;
	background-position: bottom;
	min-height: 1px;
}

Code (markup):

and that works just dandy, except the top image ends up hidden underneath the bottom image (bottom image repeats all the way to the top). So I tried putting a top margin on the top image of 306px (it's height), but that pushes my content area down by 306px. Any ideas on how to get the top image to display, then have the bottom image repeat itself down to the footer without pushing the content down?

PS, this is a wordpress theme I'm working on. I haven't done any styling, or final positioning of text yet, so it will look a bit funky, but the images are in the right place in firefox and chrome. Please take a look at it here.

Thanks guys.

 

You need to do it the other way around, the #wrapper_top needs to be inside the #wrapper_bottom, the #wrapper_top image will then be on top of the #wrapper_bottom image and as it won't repeat the repeating image behind will be visible (except for the very top part where the #wrapper_top image is).

 

AAAHA! Thank you very much man! Don't know why I didn't think to try it that way. I tried like a million different things, but never tried that. I'll change it up this weekend, then the page will be ready to replace the client's current website. Thanks a bunch.