2011-10-21 38 views
0

考慮這個例子HTML:定位內容的div

<body> 
<div id="background"> 
     <div id="area1">.....</div> 
     <div id="area2">.....</div> 
     <div id="area3">.....</div> 
    </div> 
</body> 

我有我的區域1,區域2和區域3的div都定位在我希望他們使用Twitter的引導助手庫。

我現在想把背景圖片放在所有這些背後。但是,我希望將背景圖像放置在特定位置。所以我用我的圖片的URL設置了我的CSS背景。圖像只佔用3格以下的空間佔據。

如果我改變背景div的位置,那麼其他3個區域隨之移動。

因此,我想知道,如何在不改變其他div定位的情況下將我的背景圖像放置在特定位置?

感謝

回答

0

不要移動DIV - 更改使用background-position背景圖片的位置。您可以精確指定以像素(x y),百分點(x% y%)爲單位的位置,或通過頂部/中間/底部和左/中/右點指定位置。例如:

#background { 
    background-image: url('cat.jpg'); 
    background-position: center top; 
} 
+0

完美的,沒有意識到有這樣的屬性! – DJ180

1

不知道我完全理解你想做的事,但我認爲這樣的事情會幫助

#background div {background-image:url(image.jpg); 
#area1{background-position: left top} 
#area2{background-position: center top} 
#area3{background-position: right top}