Using an image before text in h1 tags?

I was wondering if someone could tell me what the best way to include an image in CSS would be. For example, if I wanted to have the same image show up before the text in every h1 tag, how would I do this? This is how it would need to look:

[image loaded through css] Text Here

h1 {
background:transparent url(imageSrc.gif) no-repeat;
padding-left:(width-of-image)px;
}

That will probably do what you want to do.

Alternatively could try the CSS :before pseudo-element but some browsers have difficulty with rendering :before.

Thanks for your help. I tried using the first method and it works fine except for when I have more than one h1 tag on the page. For example, if I have 3 headings with h1 tags, the image only shows up on the first heading, but on the second and third headings it doesn’t show the image.

Does anybody know why the other images aren’t loading? I’d like to make it so it will work in most browsers.

can you post your exact code? it should have worked fine.

Here’s the code:

h1 {
background: transparent url("/images/bullet.gif" ) no-repeat;
color: #333;
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
line-height: 17px;
margin: 0px;
padding-left: 10px;
}

Works for me using ie6.02

It’s working for me now. I’m not sure what happened but some other tag I had in my .html page was messing it up.

Thanks again for all the help.

i’m doing something similar except on a <span> tag & ie5 on pc isn’t recogising by padding:

css:
span.on { background-image: url(…/img/bigarrh1.gif); background-position: left; background-repeat: no-repeat; padding:0 0 0 20px; }

problem is i can’t make it display:block and use text-indent because it has to be on the same line as some other bits of code (it’s for a multilingual site where the headings have to be in two languages):

html:
<h1><span class=“on”>Imeachtaí</span><span class=“sep”> | </span><a href=“eng.htm” title=“English” hreflang=“en”>Events</a></h1>