How to add a background image behind H1 text?

Hi, I'm trying to add a background image behind my H1, which is simple enough. What I want is for the image to show to the left and right of the H1 text and not directly behind the actual text characters. So, it'll basically look like this:

-- H1 TEXT -----------------

The dotted line indicated where the image will show.

What I have done is put the H1 tag inside a div and given the div the background image. However, if I leave the background of the H1 as transparent I get the image directly behind the text (which I don't want), or if I give the H1 a background color it fills across 100% of the page width so that the background image is not visible at all.

Can anyone explain how to apply a background color to the H1 WITHOUT spanning the whole width, so that I could get the effect like above?

Thanks in advance.

 

Jboo

You can accomplish this by using css, first you need to give your div a background image which you have allready done and put the H1 inside the div, create your H1 element in css with something like...

The key is to use the float property

 

Can you tell what Float will gonna control!

 

From the code above the H1 tag will "float" left.
I don't recommend you give your H1 tag a float property as you may want to use it again without the float
Something like a separate class would be better...

.bck h1
{
float: left
margin: 10px
background: white
}

Code (markup):

and the html...

<h1 class="bck"></div>

Code (markup):

I think that is right haven't tested it.

 

Strangelife - no offense intended, but LEARN HTML and/or CSS before responding to a post.

A float has NOTHING to do with what he wants, which sounds more like background-color on a second tag. You're example is SO completely out of tha ballpark it's not funny. Even the code in your example is broken - I believe you meant "h1.bck" and not ".bck h1" - since the first one won't even target the h1 - NOT that a h1 ever really needs a class since you aren't supposed to EVER have more than one h1 on a page. In any case what you said has NOTHING to do with what was asked.

This is probably closer to what he's asking for:

<h1><span>Test Text</span></h1>

Code (markup):

and the CSS

h1 {
	padding-left:16px; /* or however much bg image you want to show on the left */
	background:url(h1Background.png) 0 0 no-repeat;
}

h1 span {
	background:#FFF;
}

Code (markup):

Basically to assign two different backgrounds, you need two separate tags. Naturally you'll have to play with your heights or make h1Background.png tall enough for it not to matter.