css - 网站背景图片居中固定？

Question

我在一个网站上工作，该网站有一个居中的固定宽度 div，我想在 div 的两侧有两个设计，我可以使用两个 div。问题是我这样做的方式，这些图像会增加站点宽度，如果窗口太小，会导致出现水平滚动条。即使整个内容 div 都适合屏幕。

CSS

.container {
    margin: 0 auto;
    width: 500px;
}

.span {
    margin-right: 0;
    width: 500px;
}

.logo {
    margin-top: 25px;
}

.logo-img {
    height: 60px;
    left: -21px;
    position: relative;
}

.swirls {
    height: 0px;
}

.left-swirls {
    position: relative;
    top: -50px;
    right: 100px;
    width: 188px;
    z-index: -1;
}

.right-swirls {
    position: relative;
    top: -50px;
    left: 215px;
    width: 200px;
    z-index: -1;
}

.nav {
    background-color: #0ff;
}

.content {
    background-color: #00f;
    height: 200px;
}

HTML

<div class="container">
        <div class="span logo">
            <img src="http://imageshack.us/a/img839/2507/logongv.png" class="logo-img"/>
        </div>
        <div class="span swirls">
            <img src="http://imageshack.us/a/img831/3254/leftswirls.png" class="left-swirls" />
            <img src="http://imageshack.us/a/img600/7424/rightswirls.png" class="right-swirls" />
        </div>
    <div class="span last nav">
        Nav Bar
    </div>
    <div class="span content">
        Body content
    </div>
</div>

可以在此处查看问题示例:http://jsfiddle.net/e4j6b/8/

我试图让背景图像相对于 div 而不是浏览器的两侧居中。

有没有一种方法可以像 div 一样将背景图片居中并设置 margin: 0 auto？

Answer 1

如果您希望 .left-swirls 和 .right-swirls 不增加文档的宽度，那么它们应该是背景图像。 (对于现代浏览器，多个背景图像可以正常工作。)

示例:http://jsfiddle.net/MbGSP/1/

body {
  background: url(http://imageshack.us/a/img831/3254/leftswirls.png) center center no-repeat,
              url(http://imageshack.us/a/img600/7424/rightswirls.png) center center no-repeat;
}

您可以将背景图像水平和垂直居中，位置用 center center 居中。