html - 调整大小时 CSS 固定页脚宽图像中心

Question

我有一张宽幅图片，想用作固定页脚。主页为 960px 并居中，页脚为 1620px。如果浏览器窗口的宽度大于 960px，那么它会显示越来越多的页脚图像而不显示滚动条。

我怎样才能做到这一点？到目前为止我有这个，但它是错误的:

CSS

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

HTML

<div id="wrapper">
  <div id="body-container"> <!-- width: 960px -->
    <!-- content -->
  </div>

  <!-- fixed footer -->
  <div class="push"></div>
  <div class="footer"><img src="img/footer.png"></div> <!-- width: 1620px -->
</div>

Answer 1

.footer {
width:100%;
height:345px;
display: block;
background:url(/img/footer.png) no-repeat center top;
}