Image d'arrière-plan du site centrée et fixe?

Question

Je travaille sur un site qui a un div fixe de largeur qui est centré et je voulais avoir deux conceptions de chaque côté de la div que j'ai pu obtenir en utilisant deux divs. Le problème est la façon dont je l'ai fait, ces images s'ajoutent à la largeur du site, provoquant l'apparition d'une barre de défilement horizontale si la fenêtre est trop petite. Même si l'ensemble du contenu div correspond à l'écran.

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> 

Un exemple de la question peut être consulté ici: http://jsfiddle.net/e4j6b/8/

J'essaie d'obtenir l'image de fond (s) centrée par rapport à le div au lieu des côtés du navigateur.

Existe-t-il un moyen de centrer une image d'arrière-plan comme une div avec marge: 0 auto?

Answer 1

Si vous souhaitez que les tourbillons .left et .right-swirls ne s'ajoutent pas à la largeur du document, ils doivent être des images d'arrière-plan. (Pour les navigateurs modernes, plusieurs images de fond fonctionnent très bien.)

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

Vous pouvez centrer les images de fond, à la fois horizontalement et verticalement, avec center center pour les postes.