html - 居中的背景在 html 中被裁剪

Question

在以下情况下，我在尝试将背景水平居中时遇到问题：

• 背景很大，必须水平居中
• 该页面的最小宽度为 960 像素，并且在较小的屏幕上必须有一个滚动条

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

<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 像素的分辨率上，背景应该停止居中，而是在页面右侧出现白色间隙，并且背景保持居中。我将如何解决这样的问题？

谢谢你的想法

Answer 1

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

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

此外，您没有设置min-width:900px;容器..尝试使用：（另一个工作 jsFiddle）

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