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

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!