html - 如何设置背景图片大小(不影响div)？

Question

现在我的背景图片会适应屏幕尺寸。问题是，当屏幕缩小太多(例如移动设备)时，背景图像不再足够长以垂直填充 div。

所以我所做的是为 width 赋值，而不是使用 100%:

#content {
  width: 2000px;
}

问题是，div 不再响应，因为它的宽度是固定的。

如何解决这个难题？

相关代码如下:

HTML:

<div id="content">
  <div class="container clearfix">
  </div>
</div>

CSS:

.container {
  position: relative;
  margin: 0 auto;
  width: 960px;
}

#content {
  background: url(images/bg.jpg) repeat 0 0;
  background-repeat: no-repeat;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  background-attachment: scroll;
  background-position: 50% 0;
  position: relative;
  width: 100%;
  height: 750px;
}

#content .container {
  height: 750px;
}

还有实时站点:http://www.m2comm-semi.com/

Answer 1

这两条规则

background-size: cover;
background-position: center; /* bottom, top, etc */

应该让你的背景图片在任何分辨率下都能正常工作，只要它大到足以覆盖 f.e. 1900x1200，试一试，如果结果令人满意，请告诉我，兄弟。