如何把背景圖像放在logo圖像後面？

我有一個標題圖像在左邊。我試圖在標題中放置一個背景圖像，但bg圖像從標誌圖像的右側開始。標誌圖像是一個透明的PNG圖像，所以我猜想Bg圖片可以放在logo圖片後面。如何把背景圖像放在logo圖像後面？

下面是HTML

<div id="header"> 
    <div class="fl" style="width:378px; height:79px; overflow:hidden;"> 
     <p align="left"><a href="http://mysite.com/magento/index.php/"><img src="mysite.com/magento/skin/frontend/default/my_theme/images/dlogo.png" ></a></p> 
    </div> 
</div>

CSS的標題：

#header{ width:972px; padding:15px 0px 10px 0px; margin:0 auto; text-align:left; height:117px; background:url(../images/dbody_background.jpg)}

來源

2012-10-10 akt

這個工作對我來說：http://jsfiddle.net/Bk4qp/也許你有你的血糖有問題圖片？ –

這裏有什麼區別？ – akt

無。我用你的代碼與我的圖片（我沒有你的）。如果我理解你的問題，它似乎工作。 –

您需要使用z-index財產

的

#header 
{ 
    z-index : 100 ; 
} 

#header img 
{ 
    z-index : 101 ; 
}

圖像內z-index應該大於標題z-index ..

來源

2012-10-10 06:47:46

問題是Bg圖像是從徽標圖像的右側開始的，這就是爲什麼它不起作用。 – akt

爲什麼你不把這兩個元素的位置：絕對，並確定它的工作， –

使用z-index使事情在理解代碼時變得更加複雜。相反，您可以使用偏移參數來更改背景圖像的位置。

#header{ 
    width:972px; 
    padding:15px 0px 10px 0px; 
    margin:0 auto; 
    text-align:left; 
    height:117px; 
    background:url(../images/dbody_background.jpg) 50px 10px; 
}

其中，
50px是從左邊界偏移和..
10px從頂部界的偏移量。

你甚至可以在這裏使用負值。試試看看。

來源

2012-10-10 07:24:26 Girishkumar

的立場，謝謝。 – akt

這爲我工作，只是改變了背景屬性，因爲這 - >

background:url(../images/diwalibody_background.jpg)no-repeat scroll center top transparent;

來源

2012-10-10 09:00:18 akt

如何把背景圖像放在logo圖像後面？

回答

相關問題