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.