title: CSS fixed footer wide image center on resize
body: <p>I have a wide image I want to use as a fixed footer.  The main page is 960px and centered, and the footer is 1620px. If the browser window is greater than 960px wide, then it shows more and more of the footer image without displaying scroll bars.</p>
  
  <p>How can I achieve this?  So far I have this, but it's wrong:</p>
  
  <p>CSS</p>
  
  <pre><code>* {
    margin: 0;
  }
  
  html, body {
    height: 100%;
  }
  
  div#wrapper {
    position: relative;
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -340px;
    text-align: center;
  }
  
  div#body-container {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .footer, .push {
    width: 1620px;
    height: 340px;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
    &lt;div id="body-container"&gt; &lt;!-- width: 960px --&gt;
      &lt;!-- content --&gt;
    &lt;/div&gt;
  
    &lt;!-- fixed footer --&gt;
    &lt;div class="push"&gt;&lt;/div&gt;
    &lt;div class="footer"&gt;&lt;img src="img/footer.png"&gt;&lt;/div&gt; &lt;!-- width: 1620px --&gt;
  &lt;/div&gt;
  </code></pre>