Two Images in Header Div

Update:

I created a new id in my styles called headermain

#headermain {
background:#000000 url(“images/sistine-chapel2.jpg”) bottom left no-repeat;
height:191px;
font-family: Trebuchet MS, verdana, arial, sans-serif;
color:#fee;
}

#header {
background:#000000 url(“images/header.jpg”) bottom right no-repeat;
height:191px;
font-family: Trebuchet MS, verdana, arial, sans-serif;
color:#fee;
}

Then I created this:

<div id=”headermain”>
<div id=”header”><h1>“><?php bloginfo(‘name’); ?></h1><span><?php bloginfo(‘description’); ?></span></div>
</div>

This did not break the code, and it still validates, but headermain appears to be inert, It does nothing. Have I nested it wrong?

I think make some background for the h1.
Put the </h1> after the </span>

Then declare the H1 background in css like this

#header h1 { background:url(image location) no-repeat center; }

Is it ok?

I will try it

Innerwestink results.

I added some changes to my CSS like so:

#header h1 {
padding:0 0 0 0;
margin: 0 0 0 5%;
background:url(“images/sistine-chapel2.jpg”) bottom left no-repeat;
position:relative;
left:0px;
top:0px;
width:315px;
height:150px;
}

In Safari, the new image displays, but not in FIrefox or Opera.

Well, for some reason the jpg was not showing up in FF or Opera. I have no idea why. So, I made it a GIF, which i hate, but at least its there:)

https://totalphysiqueonline.com/ see for yourself

My Description is now out of whack though. I want to slide over to the left side of the picture (sistine) so it clears the two buttons there.

In Safari, I use Margins:

#header span {
font-size:1em;
margin: 5px 0 0 20%; float: left;
}

seems to work for Safari,

but not for FF and Opera. What value or parameter could I use in CSS that would be control placement of description?

OK, here is a final report for anyone who wants to know how I did this.

Undertypo was good to suggest a background image for the H1 tag. So I took that route. That was great advice.

I edited and added the following tags to my css file:

#header {
background:#000000 url(“images/header.jpg”) bottom right no-repeat;
height:191px;
font-family: Trebuchet MS, verdana, arial, sans-serif;
color:#fee;
}

#header h1 {
padding:0 0 0 0;
margin: 0 0 0 5%;
background:url(“images/sistine-chapel2.jpg”) bottom left no-repeat;
position:relative;
left:0px;
top:5px;
width:315px;
height:150px;
}

#header span {
font-size:1em;
margin: 5px 0 0 170px; float: left;
}

The span USE to say :

#header span {
font-size:1em;
margin: 5px 0 0 18%; float: left;
}

But Firefox did not like the margins in non-integers. So I changed it to

#header span {
font-size:1em;
margin: 5px 0 0 170px; float: left;
}

Now FF and Opera display the discription where I want it, and I also re-made the image into a jpg and resaved and uploaded it. I just hate GIF format.

So the result is good I think.

What do you peeps think?