Css 站点背景图像居中且固定？

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

CSS

HTML

导航条
身体内容

可在此处查看该问题的示例：

我试图使背景图像相对于div居中，而不是浏览器的侧面

---

是否有一种方法可以像边距为0的div一样将背景图像居中？

如果需要。左漩涡和。右漩涡不增加文档的宽度，则它们应该是背景图像。（对于现代浏览器，多个背景图像可以正常工作。）

例如：

---

您可以在水平和垂直方向将背景图像居中，使用位置的

居中
 这是正确的，我试图让他们作为背景图像，但有一个问题，这样做。如果展开浏览器，则图像会紧靠边缘，因为它们是左右定位的，而不是相对于主内容分区定位的。背景图像是防止它们影响文档流的最佳解决方案。您希望图像在不同大小的窗口中表现如何？您可以在任何元素上指定背景图像，并将位置更改为以像素或%为单位，而不是以左或中为单位。我希望背景图像始终紧靠div，但如果它们调整浏览器窗口的大小，使其正好适合内容div，则不会有水平滚动条。在我的示例中，如果您调整帧的宽度，您将看到“背景图像”保留在内容div中。是否可以将背景图像居中放置在页面上，使其与设置为边距0 auto；？的div对齐；？你可以用
居中
来定位bg图像的水平和垂直居中。哦，我的天哪！这正是我想要的，非常感谢。
.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;
}

<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>

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;
}