title: Background image and fixed height sticky footer
body: <p>This is an skeleton of my html/css: <a href="http://jsfiddle.net/GMg7B/" rel="nofollow">http://jsfiddle.net/GMg7B/</a>.</p>
  
  <p>Now I want to add a background image for the <code>div#content</code> part so that:</p>
  
  <ul>
  <li>It resizes to fit its container (something like <code>background: cover</code>)</li>
  <li>Doesn't overlap with the footer.</li>
  <li>Aspect ratio of the image is kept.</li>
  <li>Height of background image is adjusted to fit "screen's full height minus footer height", padded with white background on the sides to fill full width if necessary.</li>
  <li>Footer has fixed height, it's always pushed to the bottom of the page and remains visible without a scrollbar, independently of the screen's height.</li>
  </ul>
  
  <p>Thanks a lot.</p>