Making changing background images as you scroll compatible with IE7/8 - html

Question

I have a webpage that changes the background image as you scroll to new sections of the page. It can be viewed here. I am having trouble getting the changing background images to show up on IE7/8. I tried using css3pie, but it doesn't seem to be working. Here is a sample of my html right now:
<!-- background image section w/ text on top -->
<section id="anvil" class="bg">
<div class="center text">
<p class="imageCopy">Stunningly beautiful colors...</p>
</div>
</section>
<section class="divider">
<!-- this is the divider section -->
</section>
<!-- new background image section -->
<section id="office" class="bg">
<div class="center text">
<p class="imageCopy">at a price you can afford.</p>
</div>
</section>
and the css:
#anvil {
background-image: url(/images/anvil.jpg);
-pie-background: url(/images/anvil.jpg) no-repeat;
behavior: url(/PIE-1.0.0/PIE.htc);
}
#office {
background-image: url(/images/office.jpg);
-pie-background: url(/images/office.jpg) no-repeat;
behavior: url(/PIE-1.0.0/PIE.htc);
}
.bg {
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: 0 -80px; /* IE 8 fix */
background-position: 0 -5rem;
height: 47rem;
height: 750px; /* IE 8 fix */
}
.divider {
background-color: #000000;
height: 29rem;
height: 464px; /* IE 8 fix */
}
It's difficult for me to determine what exactly is causing the issues with IE as well, so I might be on the wrong track with the background properties (e.g., sections are not supported by IE 7/8, but I think I fixed that). Any advice would be greatly appreciated! Thanks!