網站背景圖像居中並固定？

我正在一個網站有一個固定的寬度股利的中心，我想有兩個設計的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>

問題的一個例子可以看這裏：

我試圖讓背景圖像（S）相對於中心div而不是瀏覽器的邊。

有沒有一種方式來居中一個背景圖像就像一個div與邊距：0自動？

來源

2012-12-14 LF4

如果你想.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的位置。

來源

2012-12-14 21:16:43 KatieK

這是正確的我試圖讓他們作爲背景圖像，但有這樣做的問題。如果瀏覽器展開，則圖像擁抱邊緣，因爲它們位於左側和右側，而不是相對於主內容div定位。 – LF4

背景圖像是防止它們影響文檔流動的最佳解決方案。你希望圖像在不同大小的窗口中表現如何？您可以在任何元素上指定背景圖像，並將定位更改爲像素或％而不是左側或中心。 – KatieK

我希望背景圖像能夠隨時擁抱div，但是如果它們調整瀏覽器窗口的大小以便它適合內容div，那麼將不會是水平滾動條。在我的例子中，如果你調整了框架的寬度，你會看到「背景圖像」與內容div保持一致。是否有可能在頁面上居中放置一個背景圖像，以便與設置有邊距的div排列在一起：0 auto;？ – LF4

網站背景圖像居中並固定？

回答

相關問題