X和Y上的標題和偏移後面的圖像

Question

使用CSS，我如何在某些文本後面顯示圖像並將它同時偏移到X軸和Y軸上？

我有一個950px寬的設計，所以我希望通過將該圖像放置在一個居中且寬度爲950px的容器中，讓該圖像與其餘的標題保持「同步」。

我的問題是，而不是圖像是'標題文本後面的一個圖層'，而是完全顯示圖像並推下其餘內容。

任何幫助是極大的讚賞。

IMAGE增加了澄清

感謝， 安迪。在你的CSS在你的背景位置

Answer 1

使用百分比值

.divName { 
    background-position: 50%; 

} 

或使用像頂部或底部的話...

見值here

更新的完整列表;

使用圖像作爲背景圖像，而不是嵌入HTML圖像

<div class='content'> 
    <p> Some content</p> 
    <p> More content</p> 
    .... even more content ... 
</div> 

現在的CSS：

div.content { 
    background-image: url('image path'); 
    background-position: 50%; 
} 

這樣的形象將永遠是後面的內容，這將是在div的中心。

Answer 2

你的意思是類似this example？

奧克，這更清楚。現在我很確定this is what you want。

Answer 3

參見：http://jsfiddle.net/Fx5q3/

• http://css-tricks.com/absolute-positioning-inside-relative-positioning/
• https://developer.mozilla.org/en/Understanding_CSS_z-index/Adding_z-index

CSS：

#container { 
    width: 300px; 
    margin: 0 auto; 
    background: #ccc; 
    background: rgba(127,127,127,0.7); 

    position: relative 
} 
#behindImage { 
    background: url(http://dummyimage.com/150x150/f0f/fff) no-repeat; 
    width: 150px; 
    height: 150px; 
    position: absolute; 
    top: -30px; 
    left: -90px; 
    z-index: -1 
} 

HTML：

<div id="container"> 
    <div id="behindImage"></div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis volutpat blandit. Morbi bibendum pharetra bibendum. Fusce sit amet lobortis odio. Proin ultricies, massa vel ornare fringilla, diam sem convallis arcu, nec laoreet massa leo nec dolor. Nullam vel massa ligula. Donec semper eros dapibus nibh dictum egestas ac nec libero. Maecenas et fringilla augue. Phasellus imperdiet urna in sem scelerisque adipiscing.</p> 
</div>