中心背景在html中被裁剪

Question

在以下情况下尝试水平居中后，我遇到了问题：

• 背景很大，必须水平居中
• 页面的最小宽度为960px，小屏幕上必须有滚动条

所以我决定这样做（伪代码）：

<bg-div> # this will contain the background image with "center center no-repeat" option
    <content-div> # this will be 960px margin 0 auto
    </content-div>
</bg-div>

实例：http://jsfiddle.net/CtMRt/4/

问题：背景应该停止在小于960px的分辨率上居中，而是在页面的右侧出现白色间隙，背景保持居中。我怎么解决这样的事情？

感谢您的想法

Answer 1

您可以使用css媒体查询：（working jsFiddle）

@media screen and (max-width:960px){
   bg-div{background:url(..) left center;}
}

此外，您没有将min-width:900px;设置为容器..尝试使用：（another working jsFiddle）

.sec { height: 90px; min-width:900px; }