title: Body background and footer on bottom of page
body: <p>I can't find a solution to this issue. I would like to have a footer that's always at the bottom (not sticky/fixed), and also a background that's always at the bottom (not sticky/fixed).</p>
  
  <p>I made a picture to make it more clear: <a href="https://i.imgur.com/qVLb1bl.png" rel="nofollow noreferrer">https://i.imgur.com/qVLb1bl.png</a></p>
  
  <pre><code>&lt;html&gt;
   &lt;div id="container"&gt;
    &lt;div class="content"&gt;
     &lt;h1&gt;Content&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div class="footer"&gt;
     &lt;h2&gt;Footer&lt;/h2&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>html, body { height: 100%; }
  
  body { display: flex; flex-direction: column; background: url('http://www.freetoursbyfoot.com/wp-content/uploads/2013/08/New-York-Skyline-Downdown-view.jpg') no-repeat bottom center; }
  
  #container { display: flex; flex-direction: column; height: 100%; }
  
  .content { max-width: 800px; width: 100%; height: 400px; margin: 0 auto; background: #eee; margin-top: 20px; text-align: center; padding-top: 30px; }
  
  .footer { max-width: 800px; width: 100%; height: 100px; background: #000; margin: auto auto 0 auto; }
  </code></pre>
  
  <p>I also made a codepen: <a href="https://codepen.io/nickm10/pen/XVJjGb" rel="nofollow noreferrer">https://codepen.io/nickm10/pen/XVJjGb</a></p>
  
  <p>Anyone know the solution?</p>
  
  <p>Thanks!</p>