title: Multiple fullscreen background images on vertical site
body: <p>Using the JQuery ScrollTo plugin, I've created the following vertical site <a href="http://www.thenally.com/wordpress/" rel="nofollow">LINK</a>.  The basic page architecture is as follows:</p>
  
  <pre><code>&lt;div id="fixed-menu"&gt;
       &lt;!-- MAIN MENU FIXED TO TOP OF WINDOW --&gt;
  &lt;/div&gt;
  
  &lt;div id="wrapper"&gt;
       &lt;div id="mask"&gt;
            &lt;div id="page1"&gt;
               &lt;!-- PAGE 1 CONTENT --&gt;
            &lt;/div&gt;
            &lt;div id="page2"&gt;
               &lt;!-- PAGE 2 CONTENT --&gt;
            &lt;/div&gt;
            &lt;div id="page3"&gt;
               &lt;!-- PAGE 3 CONTENT --&gt;
            &lt;/div&gt;
            &lt;div id="page4"&gt;
               &lt;!-- PAGE 4 CONTENT --&gt;
            &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My issue is when trying to have a fullscreen background image for each separate 'page'.  I have experience using the JQuery plugin Fullscreenr to create a background image which properly adapts to different screen resolutions, etc.  I am unfamiliar, though, with how to set a different one for each 'page' of the site.  I've been thinking that an alternative may be to trigger a change of background image depending on which menu item is selected.  Does anyone have any experience or advice in the matter?  I have tried stacking the images, but I want to avoid seeing partial background images at any point on the site.</p>