title: fullscreen background image creates conflict with footer position
body: <p>So I am trying to do 2 things that work well on their own, but I'm having trouble integrating them together. First off, here's a link to the site: <a href="http://ericbrockmanwebsites.com/dev4" rel="nofollow">http://ericbrockmanwebsites.com/dev4</a></p>
  
  <p>Create a fullscreen background image using</p>
  
  <pre><code>html {
    min-height:100%;
    background-size: cover;
    background-image: url(images/bg.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
  }
  </code></pre>
  
  <p>create a footer that stays at the bottom of the page, even when there's no content, which normally would require something like this:</p>
  
  <pre><code>html {
    height:100%;
  }
  
  body {
    height:100%;
  }
  
  .container {
    min-height:100%;
  }
  
  #footer {
    clear:both;
    position:relative;
  }
  </code></pre>
  
  <p>The problem is that in order for the footer to stay at the bottom the height of the html / body needs to be defined at 100%, but unless I define them using the min-height value, the background image just covers the screen as it loads. Meaning that if / when there's a need to scroll down, the background image only goes down to where the bottom of the screen was on load.</p>
  
  <p>I've played around with this for a few hours, but can't seem to find a resolve. Am I missing something obvious?</p>