如何有一个背景图像的大小(不影响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，只要给它一个镜头，让我知道结果是否令人满意，兄弟。