Putting an Image in a Heading Tag

Similar to an LI bullet

[wfernley]

Hey everyone,

Is it possible to put an image in a heading tag? I want to put a small arrow pointing to the heading title. Is there a way I can put an image and float it right of the heading file?

What is the best way to go about doing this?

Thanks in advance for your help!

Wes

[Setek]

You'd do best not actually having an

<img />

element, since it seems like what you're after is more a "design point" rather than a "function".

I would put it as a background image to the heading:

h1 { background: #fff url('/images/heading-bullet.png') no-repeat 0 100%; }

.. will place it "floated to the right" :)

[wfernley]

Thanks for your reply :)

I ended up getting it to work like you said and also got it to float to the left.

The problem is, the heading text overlaps the image. Is there anyway to padding the heading text and not the image?

Thanks again for your reply!

[Setek]

Yep, just add a padding-right the width (or a bit more) of the image:

h1 { background: #fff url('/images/heading-bullet.png') no-repeat 0 100%;
padding-right: 20px; }

.. saying your image was 15px wide, and you wanted 5px of gutter :)

[Robin_reala]

Yep, background images aren't affected by padding, so:

h1 { padding-right: 20px; }

(or whatever padding you want).

[wfernley]

Thanks for your replies :)

That padding works great. For some reason, the first time I did it, the padding didn't work. The second time I added it, the padding worked fine. Not sure what happened there ;)

thanks again!

Wes