html - 居中背景在 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/

问题:在小于 960 像素的分辨率下，背景应该停止 self 居中，而是页面右侧出现白色间隙，背景保持 self 居中。我该如何解决这样的问题？

谢谢你的意见

Answer 1

您可以使用 css 媒体查询:( working jsFiddle )

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

此外，您没有为容器设置 min-width:900px;。尝试使用:( another working jsFiddle )

.sec { 高度:90px；最小宽度:900px； }