Position text over an image

[alphacooler]

How can I place text over an image without using using absolute positioning? I already tried using z-index and relative positioning, but it kept moving my image as well as the text. Also, I would like to do this without using the image as a background to a div because I need to make the image a link.

Any ideas?

[xfinx]

You need the following:

<span style="position: relative;">
<img src="img" alt="img"/>
<span style="position: absolute; top: 3px left: 3px;">bla</span>
</span>

This works.. I tested it at my website..
Make sure the order of the html is correct like above

[Setek]

If the only reason you don't want it as a background image is because you want it to link (rather than you want it to print out) you can just do this:

1. Set your anchor to display block (this allows us to use widths and heights);
   
2. Float your anchor - so it "appears" inline;
   
3. Set a minimum width (with a fixed width for IE only);
   
4. Set a height;
   
5. Set your background on it; and
   
6. Style the text as needed.

It's a standard CSS image-replacement technique. Here's one we prepared earlier:

a.button { display: block;
float: left;
min-width: 12em;
width: auto!important;
width: 12em;
height: 2em;
padding-top: 0.5em;
background: #fff url('/images/image.jpg') no-repeat center center;
text-align: center; }

Note: reason why

!important

mis-usage is there is just to demonstrate "IE only" rules - if you have a conditional comment, I would put the

width: 12em;

part in there, and remove the

width: auto;

, so standards-compliant just have

min-width

set.

Linkable image with text in front :)

[xfinx]

I like Seteks way more than the way I submitted.

With Seteks way, the html stays more clean.
With my way, you just solve your question ;-)

[Archer74]

use styling on the link istelf:

<a href="" style="background-image:url(); height:XX;
width:XX; text-align:center; font: 25; color:white; padding-top:XX">Your Text Here</a>

adjust height/width to suit the image and play with the padding till you have the text where you want.