Site background image centered and fixed? - css

Question

I'm working on a site that has a fixed width div that is centered and I wanted to have two designs on either side of the div which I was able to get using two divs. The issue is the way I did it, those images add to the site width, causing a horizontal scroll bar to appear if the window is too small. Even though the whole content div fits with in the screen.
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>
An example of the issue can be viewed here: http://jsfiddle.net/e4j6b/8/
I'm trying to get the background image(s) centered relative to the div instead of the sides of the browser.
Is there a way to center a background image just like a div with margin: 0 auto?

Answer 1

If you want .left-swirls and .right-swirls to not add to the width of the document, then they should be background images. (For modern browsers, multiple background images work fine.)
Example: 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;
}
You can center background images, both horizontally and vertically, with center center for the positions.