Header text with image

[Jaykappy]

Trying to Place an image behind some text in my header...
Dont know if there is a better way than what I am trying....if so open to suggestions..

ONE issues with the below....seems I cannot do Background-repeat="no-repeat"

How do i NOT REPEAT the image in the space...simply want the image center vertical and center horizontal with text center as welll......

<TABLE BORDER="0" cellpadding="0" CELLSPACING="0">
<TR>
<TD WIDTH="100" HEIGHT="100" BACKGROUND="Leaf1.gif" VALIGN="center">
<FONT SIZE="+1" COLOR="Black">Testing</FONT>
</TD>
</TR>
</TABLE>

[Jaykappy]

Let me try to explain what I am after a little clearer...

I want a header say 100px height and no color
I want a rectangle same width as header and only 80px in height say this is red
I then have an 100px x 100px image I want to place on top of BOTH
So this will appear to hang over the red header, where as the original header is larger and invisiable.
And then some text right across the image....

Does that make sense? Hope someone can help....maybe done with a few DIVs?

[Jaykappy]

Trying this....
I can get the full red color for the whole area
I can get the 80px height blue on top
But cant figure how to get the image on top of the blue and hanging over the blue onto the red

The image does not show up

<div id="headerbackground"> 
     <div id="secondheader">
          <div id="thirdheader"> 
          </div>
      </div>
</div>

#headerbackground{
	text-align:left;	
	width:100%;
	background:red;
	height:100px;
}
#secondheader{
	height="100px";
	width="100px";
	background-image:url('background1.gif');	
	background-size:100px 100px;
	background-repeat:no-repeat;
}
#thirdheader{
	text-align:left;	
	width:100%;
	background:blue;
	height:80px;		
}