how to put background image behind logo image?

Question

I have header which has a logo image on the left .I am trying to put a background image in the header,but the bg image is starting from the right of the logo image.The logo image is a transparent PNG image ,so i guess the Bg image can put behind the logo image.

Here is the 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 for header:

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

Answer 1

Use of z-index makes things more complicated while understanding code. Instead you can use offset parameter to change position of background image.

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

Where,
50px is the offset from left boundary and..
10px is offset from top boundary.

you can even use negative value here. try it check it out.

Answer 2

You need to use the z-index property

The

#header
{
   z-index : 100 ;
}

#header img
{
   z-index : 101 ;
}

The image inside z-index should be greater than the header z-index ..

Answer 3

这对我有用，只需将Background属性更改为->

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