사이트 배경 이미지가 중앙에 고정되어 있습니까?

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의 대신에 브라우저의 측면.

margin이 0 인 div와 같이 배경 이미지를 중앙에 배치 할 수 있습니까? 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로, 수평 및 수직, 배경 이미지의 중심을 할 수 있습니다.