General discussion


Superimpose text over an image

By MaryWeilage Editor ·
The Dec. 3 edition of the Design and Usability Tactics e-newsletter explains why you may want to consider superimposing text over an image using the CSS-styled text technique. Are you already using this technique? If not, do you think Michael Meadhra makes a good case for trying this method the next time this situation arises? Share your thoughts on this method.

If you aren't subscribed to the Design and Usability Tactics TechMail, visit our e-newsletter subcenter to subscribe to this free e-newsletter:;;tag=fb

* Please delete any extra spaces that appear when you paste this link into your browser.

This conversation is currently closed to new comments.

4 total posts (Page 1 of 1)  
| Thread display: Collapse - | Expand +

All Comments

Collapse -

I agree

by ALSOPLS In reply to Superimpose text over an ...

I have been following this method since I started using CSS. I read some of Meyer's (Eric?) work on the subject and have found this to be a super simple method of text over graphics.
Also, when updating a site, it is simple to change the text, while keeping the graphic, or changing the graphic while keeping the text.

Collapse -

pro and con

by alexcohn In reply to I agree

The big advantage of this method is that the quality of text rendering is not reduced by using compressed images. Sure, the flexibility is greatly improved, too.

The big disadvantage, Michael deliberately ignored, is the fact that quite often superimposed text is designed to "label" the image even if the latter is saved to disk or reused in another fashion. Alternatively, some designers choose server-generated text to use extravagant fonts or character sets, or to prevent text copy to clipboard.

Unfortunately, the CSS method does not scale automatically with graphics or text changes: the whole design should be manually tuned if the text becomes a bit longer, or if the image becomes shorter.

Finally, the method does not need the CSS: I've been using "graphical buttons" with text superimposed over a 3-d round-cornered JPEG with the help of tables.

Collapse -

Programmer Comforts

by anandtirtha In reply to pro and con

The Css method is a good alternative to images for including the superimposed text. But, there is a limitation as far as presentation alignments and a programmer has to necessorily handle these issues.

This limitation, in certain cases, can be an advantage for the programmer since manual tweeking for alignemnt will allow customisation of presentation (look and feel aspects).

Generally a good option though.

Collapse -

good tip

by jlhiowa In reply to Superimpose text over an ...

Thanks, I found this useful. It's always good to learn a variety of ways to do things so that you can use the best method for each situation.

Back to Web Development Forum
4 total posts (Page 1 of 1)  

Related Discussions

Related Forums