Background Image Sticking Out Below Sticky Footer

Question

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?

This is my HTML:

<body>
  <header style="position: static;">
     <div class="wrapper">
     <div class="search" style="float: left; width: 20%; position: absolute; left: 0;">
     <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;">
     </div>
     <div class="social" style="right: 0; position: absolute;">
        <a href="http://instagram.com" target="_blank"><img src="images/insta-ico.png" /></a>
        <a href="http://facebook.com" target="_blank"><img src="images/fb-ico.png" /></a>
        <a href="mailto:info@summerheart.co.za"><img src="images/email-ico.png"/></a>
        </div>

        <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;"></div>
        <div class="logo"><a href="home.html"><img src="images/sh_logo3.png" /></a></div>
        <nav id="nav" role="navigation">
           <a href="#nav" title="Show navigation">Show navigation</a>
           <a href="#" title="Hide navigation">Hide navigation</a>
           <ul>
              <li><a href="home.html" aria-haspopup="true">HOME</a></li>
              <li><a href="shop.html" aria-haspopup="true">SHOP</a></li>
              <li><a href="about.html" aria-haspopup="true">ABOUT</a>
              <li><a href="sizing.html">SIZING</a></li>
              <li><a href="video.html">VIDEO</a></li>
              <li><a href="press.html">PRESS</a></li>
              <li><a href="social.html">SOCIAL</a></li>
              <li><a href="contact.html">CONTACT</a></li>
           </ul>
        </nav>
     </div>
  </header>
  <div id="hero"></div>
  <!--<div style="background-color: #FAEDE8; z-index: 0; position: inherit;">
     <p style="text-align: center; font-size: 0.9em; font-weight: 400; color: #000; letter-spacing: 1px; padding: 2px;">FREE SHIPPPING ON ALL ORDERS</p>
  </div>-->
  <footer>
     <div class="foot-wrap">
        <div class="foot-list-left">
           <ul>
              <li><a href="privacy.html">PRIVACY POLICY</a></li>
              <li><a href="terms.html">TERMS OF USE</a></li>
              <li><a href="customer.html">CUSTOMER SERVICE</a></li>
              <li><a href="orders.html">ORDERS</a></li>
              <li><a href="returns.html">RETURN POLICY</a></li>
           </ul>
        </div>
        <div class="foot-list-right">
           <ul>
              <li>© 2015 SUMMERHEART</li>
           </ul>
        </div>
     </div>
  </footer>
</body>

And my CSS:

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;
}

And lastly the JavaScript

$(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)] + ')'});
     });

Any thoughts as to what is causing the jump?

here is the page in question - http://japesfawcett.com/testsh/hometest.html

Answer 1

After looking at your code, (and as MinusFour) pointed out. You're issue is the min-width:100% on your #hero div.

Remove this and you will be back in business!

Min-height 100% means that the smallest that div could ever be is, well, 100% of the window. This was causing your footer to sit at the bottom of your window instead of the page.

Here is a JSFiddle showing you the change.

Solution 2:

Alright, try this out:

Here is your new HTML structure . I kept all of your original class names so you shouldn't have to rename everything...

        <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;"></div>
        <div class="logo"><a href="home.html"><img src="images/sh_logo3.png" /></a></div>
        <nav id="nav" role="navigation">
          <a href="#nav" title="Show navigation">Show navigation</a>
          <a href="#" title="Hide navigation">Hide navigation</a>
          <ul>
            <li><a href="home.html" aria-haspopup="true">HOME</a></li>
            <li><a href="shop.html" aria-haspopup="true">SHOP</a></li>
            <li><a href="about.html" aria-haspopup="true">ABOUT</a>
            <li><a href="sizing.html">SIZING</a></li>
            <li><a href="video.html">VIDEO</a></li>
            <li><a href="press.html">PRESS</a></li>
            <li><a href="social.html">SOCIAL</a></li>
            <li><a href="contact.html">CONTACT</a></li>
          </ul>
        </nav>
      </div>
    </header>



    <div id="content">
      <div id="hero"></div>
    </div>
    <div class="push"></div>
  </div>
  <footer class="footer">
    <div class="foot-wrap">
      <div class="foot-list-left">
        <ul>
          <li><a href="privacy.html">PRIVACY POLICY</a></li>
          <li><a href="terms.html">TERMS OF USE</a></li>
          <li><a href="customer.html">CUSTOMER SERVICE</a></li>
          <li><a href="orders.html">ORDERS</a></li>
          <li><a href="returns.html">RETURN POLICY</a></li>
        </ul>
      </div>
      <div class="foot-list-right">
        <ul>
          <li>© 2015 SUMMERHEART</li>
        </ul>
      </div>
    </div>
  </footer>
</body>

Here is the main part I added to your CSS , but I did create the JSFiddle with your entire main.css file, so it should just be a copy/paste solution. Apologies for the CSS being a little messy in the fiddle.

* {
margin: 0;
}
html, body {
height: 100%;
}
.site-wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}

#content{
      position: absolute;
    z-index: -94;
    display: block;
    top: 0;
    height: 100%;
    width: 100%;
}


.footer, .push {
height: 4em;
z-index:12;
position:absolute;
}

.footer, .push {
clear: both;
}

Here is the Full Screen JSFiddle

Here is the Code View JSFiddle

Hopefully this solves your problem! Let me know!

*You may need to mess with some z-index on your header, but that's a small change.

Background Image Sticking Out Below Sticky Footer

Question

1 answers

solution1
1 ACCPTED 2015-09-25 12:12:39

Background Image Sticking Out Below Sticky Footer

Question

1 answers

solution1 1 ACCPTED 2015-09-25 12:12:39

solution1
1 ACCPTED 2015-09-25 12:12:39