Repeating y-axis background not properly functioning in IE7.

Included are images of how the image looks in every explorer except IE7 and the IE7 version. Images are linked from Image Shack.

Functional version: Click here

IE7 Version: Click Here

Here is my code
HTML
Code:
<div id="BodyWrap">
   <div id="Header">
      Header Content
   </div>
   <div id="ContentWrap">
       <div id="Content">
       Lorem Ipsum
       </div>
   </div>
</div>
<div id="Footer">
</div>
CSS
Code:
CSS Styles
#BodyWrap
{
  background: url("/ContentBackground.png") repeat-y scroll center top transparent;
  color: #332921;
height: 100%;
margin-left: auto;
margin-right: auto;
padding-bottom: 5px;
padding-left: 20px;
padding-right: 20px;
width: 1000px;
}
#ContentWrap
{
  clear: both;
  height: 100%;
  width: 1000px;
}
#Content
{
  float: left;
  margin: 35px 30px 0;
  width: 865px;
}
In the IE7 specific style sheet the footer's display attribute is set to none to show exactly what the background image is doing. Otherwise the top of the footer would sit where the drop shadow area ends.