如何對齊頁面兩側的背景？

我需要在頁面左側和右側分別對齊頁面內容和重複背景，以獲得居中的div： What it looks like now 。在左側的箭頭模式應該從哪裏開始頁面的左側結束，重複到屏幕左側的結束，並在右側的同樣的事情。在右側它正確對齊，但這是巧合。目前的代碼是：this fiddle 如何對齊頁面兩側的背景？

HTML：

<body> 
    <div class="container"> 
     <div class="content"> 
      <p> 
       Lorem ipsum dolor sit amet 
      </p> 
     </div> 
    </div> 
</body>

CSS：

* { 
    min-height: 100%; 
    margin: 0; 
    padding: 0; 
} 
body { 
    background-image: url('http://i.imgur.com/mcX3gBy.png'); 
    background-attachment: fixed; 
} 
.container { 
    min-height: 100%; 
} 
.content { 
    margin: 0 auto; 
    width: 150px; 
    background-color: #fff; 
    min-height:100%; 
}

來源

2013-07-27 maciejjo

好了，這是可以做到但它不會是那個漂亮的..你必須改變你的結構創建2部分背景（即使css3的多重背景在這種情況下也無濟於事）。

Here the working jsFiddle

我裏面.container增加了以下內容：

<div class="leftBG"></div> 
<div class="rightBG"></div>

，並添加CSS：

.leftBG{ 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:50%; 
    height:100%; 
    z-index:1; 
    background:url('http://i.imgur.com/mcX3gBy.png') top right repeat; 
} 

.rightBG{ 
    position:absolute; 
    top:0px; 
    left:auto; 
    right:0px; 
    width:50%; 
    height:100%; 
    z-index:1; 
    background:url('http://i.imgur.com/mcX3gBy.png') top left repeat; 
}

這裏做的事情基本上是除以2份背景 - 左，右，每一個都有它當左背景左對齊和對齊權背景自己的背景。

來源

2013-07-27 09:20:44

背景仍然沒有啓動，在中間塊結束時，它應該看起來像[this]（http://i.imgur.com/VNczttR.png）也許左右div不應該在中間，而是在中心div？ – maciejjo

是的，但它沒有對齊中心div的一面...第1背景塊應該開始向右其中中間塊結束，而不是它背後 – maciejjo

我想用正確的解決方案，並留下的div是正確的，但他們應該結束對中央塊的兩側，我只是不知道該怎麼做。 – maciejjo

如何對齊頁面兩側的背景？

回答

相關問題