Repeating Background not working IE7

programming web dev
1

Repeating y-axis background not properly functioning in IE7.

Images:
Functional version:Click Here

Non-functioning version from IE7: Click Here


<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 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.