Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Position text over an image

7:36 am on Sep 11, 2006 (gmt 0)

Full Member

10+ Year Member

joined:Feb 4, 2005
votes: 0

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?

8:50 am on Sept 11, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 25, 2005
posts: 120
votes: 0

You need the following:

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

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

4:17 am on Sept 12, 2006 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
votes: 0

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

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

Linkable image with text in front :)

5:44 am on Sept 12, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 25, 2005
votes: 0

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 ;-)

9:35 am on Sept 12, 2006 (gmt 0)

New User

5+ Year Member

joined:Sept 12, 2006
votes: 0

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.