title: Background Image Sticking Out Below Sticky Footer
body: <p>I've just added a background image to a div on my homepage which sits in between my header and footer, and it is causing my sticky footer to sit at the bottom of the window instead of below the background image - so the background image sticks out below the footer... How can I get my sticky footer to sit below the div with the background image?</p>
  
  <p>This is my HTML:</p>
  
  <pre><code>&lt;body&gt;
    &lt;header style="position: static;"&gt;
       &lt;div class="wrapper"&gt;
       &lt;div class="search" style="float: left; width: 20%; position: absolute; left: 0;"&gt;
       &lt;input type="text" class="st-default-search-input" contenteditable="true" style="background-color: #fff; border: 1px solid #EEE1DC; color: #000; font-weight: 400; float: left;"&gt;
       &lt;/div&gt;
       &lt;div class="social" style="right: 0; position: absolute;"&gt;
          &lt;a href="http://instagram.com" target="_blank"&gt;&lt;img src="images/insta-ico.png" /&gt;&lt;/a&gt;
          &lt;a href="http://facebook.com" target="_blank"&gt;&lt;img src="images/fb-ico.png" /&gt;&lt;/a&gt;
          &lt;a href="mailto:info@summerheart.co.za"&gt;&lt;img src="images/email-ico.png"/&gt;&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div data-embed_type="cart" data-shop="summerheart.myshopify.com" data-checkout_button_text="Checkout" data-cart_button_text="" data-button_text_color="000" data-button_background_color="FAEDE8" data-background_color="transparent" data-text_color="757575" data-accent_color="FAEDE8" data-cart_title="Your cart" style="float: right; right: 0; margin-right: 20px; padding-top: 3px; padding-right: 0px; position: absolute; z-index: 9999;"&gt;&lt;/div&gt;
          &lt;div class="logo"&gt;&lt;a href="home.html"&gt;&lt;img src="images/sh_logo3.png" /&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;nav id="nav" role="navigation"&gt;
             &lt;a href="#nav" title="Show navigation"&gt;Show navigation&lt;/a&gt;
             &lt;a href="#" title="Hide navigation"&gt;Hide navigation&lt;/a&gt;
             &lt;ul&gt;
                &lt;li&gt;&lt;a href="home.html" aria-haspopup="true"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="shop.html" aria-haspopup="true"&gt;SHOP&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="about.html" aria-haspopup="true"&gt;ABOUT&lt;/a&gt;
                &lt;li&gt;&lt;a href="sizing.html"&gt;SIZING&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="video.html"&gt;VIDEO&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="press.html"&gt;PRESS&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="social.html"&gt;SOCIAL&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="contact.html"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
             &lt;/ul&gt;
          &lt;/nav&gt;
       &lt;/div&gt;
    &lt;/header&gt;
    &lt;div id="hero"&gt;&lt;/div&gt;
    &lt;!--&lt;div style="background-color: #FAEDE8; z-index: 0; position: inherit;"&gt;
       &lt;p style="text-align: center; font-size: 0.9em; font-weight: 400; color: #000; letter-spacing: 1px; padding: 2px;"&gt;FREE SHIPPPING ON ALL ORDERS&lt;/p&gt;
    &lt;/div&gt;--&gt;
    &lt;footer&gt;
       &lt;div class="foot-wrap"&gt;
          &lt;div class="foot-list-left"&gt;
             &lt;ul&gt;
                &lt;li&gt;&lt;a href="privacy.html"&gt;PRIVACY POLICY&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="terms.html"&gt;TERMS OF USE&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="customer.html"&gt;CUSTOMER SERVICE&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="orders.html"&gt;ORDERS&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="returns.html"&gt;RETURN POLICY&lt;/a&gt;&lt;/li&gt;
             &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="foot-list-right"&gt;
             &lt;ul&gt;
                &lt;li&gt;© 2015 SUMMERHEART&lt;/li&gt;
             &lt;/ul&gt;
          &lt;/div&gt;
       &lt;/div&gt;
    &lt;/footer&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>body {
  background-color: #FAEDE8;
  font-family: 'Open Sans', sans-serif;
  margin: 0 0 50px;
  overflow: auto;
  overflow-x: hidden;
  }
  
  footer {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  height: 50px;
  width: 100%;
  background-color: #FAEDE8;
  color: #000;
  overflow: hidden;
  }
  
  #hero { 
  position: absolute;  
  min-height: 100%; 
  background-size: cover;  
  width: 100%; 
  background-repeat: no-repeat;
  -webkit-user-select: none; 
  -khtml-user-select: none; 
  -moz-user-select: none; 
  -o-user-select: none; 
  user-select: none;
  overflow-y: auto;
  }
  </code></pre>
  
  <p>And lastly the JavaScript</p>
  
  <pre><code>$(function() {
        var images = ['hero1.jpg', 'hero2.jpg', 'hero3.jpg', 'hero4.jpg', 'hero5.jpg', 'hero6.jpg', 'hero7.jpg', 'hero8.jpg', 'hero9.jpg'];
        $('#hero').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
       });
  </code></pre>
  
  <p>Any thoughts as to what is causing the jump?</p>
  
  <p>here is the page in question - <a href="http://japesfawcett.com/testsh/hometest.html" rel="nofollow">http://japesfawcett.com/testsh/hometest.html</a></p>