homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Position text over an image

10+ Year Member

Msg#: 3078597 posted 7:36 am on Sep 11, 2006 (gmt 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?



5+ Year Member

Msg#: 3078597 posted 8:50 am on Sep 11, 2006 (gmt 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


10+ Year Member

Msg#: 3078597 posted 4:17 am on Sep 12, 2006 (gmt 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 !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+ Year Member

Msg#: 3078597 posted 5:44 am on Sep 12, 2006 (gmt 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 ;-)


5+ Year Member

Msg#: 3078597 posted 9:35 am on Sep 12, 2006 (gmt 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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved