title: Changing background-image onscroll
body: <p>I'm trying to change the background image of an element after a certain position has been scrolled past. Here's a snippet of my code:</p>
  
  <pre><code>&lt;body&gt;
   &lt;script&gt;
    window.onscroll = function() {scrollBG()};
  
    function scrollBG() {
     if (document.body.scrollTop &gt; document.getElementById("one").getBoundingClientRect().top ||
         document.documentElement.scrollTop &gt; document.getElementById("one").getBoundingClientRect().top) {
       document.getElementById("outer").style.backgroundImage = "url('imgs/pic1.jng')";
     } else {
       document.getElementById("outer").style.backgroundImage = "url('imgs/pic2.jpg')";
     }
    }
   &lt;/script&gt;
   &lt;table id="outer"&gt;
  </code></pre>
  
  <p>I'm using a similar coding style to show/hide a "back to top" button after a certain scroll position that functions just fine. I don't think there's a conflict between the two (though inline scripting isn't my preferred style) because even when I remove everything related to the "back to top" button, my code still fails to function.</p>
  
  <p>Is this a stupid syntactical error, or is there a more fundamental error to my approach?</p>