如何把背景图像放在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图像后面？

回答

相关问题