Welcome to WebmasterWorld Guest from 54.158.143.40

Forum Moderators: not2easy

Message Too Old, No Replies

Position text over an image

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

10+ Year Member



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 Sep 11, 2006 (gmt 0)

5+ Year Member



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

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

10+ Year Member



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

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

5+ Year Member



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 Sep 12, 2006 (gmt 0)

5+ Year Member



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.