Web Development

Superimpose text over an image by using CSS-styled text

If your page design calls for a photo with superimposed text, you don't have to create an image file that includes both the photo and the text. Instead, you can use CSS to keep the text and image separate and still achieve the desired effect.

This article is from Builder.com's Design and Usability Tactics e-newsletter. Sign up instantly to begin receiving the Design and Usability Tactics e-newsletter in your inbox.

How would you handle a page design that called for a photo with superimposed text? The common approach has been to create an image file that includes both the photo and the superimposed text, and insert it into your page with an <img> tag.

It may be time to rethink that standard solution. Although inserting an image that consists of text superimposed over a photo is a valid, standards-compliant technique, there are hidden costs to using such a composite image; there are also distinct advantages to replacing the composite image with CSS-styled text over a background image.

The old way to superimpose text
The standard technique for superimposing text over an image has been to use an image editor, such as Photoshop, to create a composite image that contains the desired text embedded into the photo. Then, you could add the resulting image file to your Web page using an <img> tag.
<img src="/images/compositeimage.JPG" width="380" height="500"
alt="Superimposed Text"/>


Occasionally, you might have used HTML text floating over a background image instead, but only if the image was large enough to fill the page or small enough to fit in a table cell. Otherwise, the only question about how to create and apply the composite image was what compression settings to use to reduce the file size, while maintaining adequate sharpness in the text.

Image optimization for composite text/photo images is a real challenge because the crisp edges of text deteriorate rapidly as JPG compression ratios increase. Even moderate compression levels cause the text to exhibit noticeable edge distortion and compression artifacts. As a result, large text looks fuzzy and small text becomes unreadable, unless you stick with low compression settings that produce high-quality images at the expense of large file sizes that make your page slow to load.

The CSS way to superimpose text
You can easily duplicate the effect of text superimposed over an image by using CSS-styled text and a background image in a <div> tag. It's a simple, straightforward technique, but surprisingly few Web builders use it. Perhaps it's due to concerns about proper text positioning over the image, but it's most likely because the reliance on composite images has become a long-standing habit.

To insert a background image into a <div>, you use the background-image attribute. You'll also want to set the size of the <div> to match the image dimensions, and set the background not to repeat. The following sample code defines a background image for a <div> with the id = test:
div#test {
    background-image:  url(/images/backgroundimage.JPG);
    background-repeat: no-repeat;
    height: 500px;
    width: 380px;
}
 
<div id="test">Superimposed Text</div>

If the text positioning relative to the image is simple, you could add any necessary text formatting to the div#test style and use the padding-top and padding-left attributes to position the text in the <div>. On the other hand, if you need more control over text positioning, or the text consists of multiple lines and paragraphs, you can nest the text within another <div>, like this:
div#testtext {
    position: relative;
    height: auto;
    width: auto;
    left: 25px;
    top: 200px;
}
 
<div id="test"><div id="testtext">Superimposed Text</div></div>

Note that the nested <div> has its position attribute set to relative so the left and top attributes position the text within its containing element—the <div> containing the background image—rather than on the page as a whole.

Advantages of the CSS method
Using the CSS-styled text technique for superimposing text over a photo has several advantages:
  • Smaller image files: By removing the text from the composite image, you can usually employ much stronger image compression settings without degrading the quality of the text. The result is faster page loads.
  • Sharper text rendering: CSS-styled text is always rendered at the maximum resolution of the visitor's computer screen. There are no softening or compression artifacts to worry about.
  • Easier text editing: Editing the superimposed text in a composite image requires recreating the image file; editing the text in a <div> is just like editing any other plain text on your Web page.
  • More flexible positioning: You have more options for positioning a <div> on your page than positioning an <img> tag.
  • Text accessibility: CSS-styled text is fully accessible to special-needs visitors and to search engines. There's no need for alt text attributes or other accessibility workarounds.

The next time you need to superimpose text over a photo, consider using a background image in a <div> containing CSS-styled text instead of creating a composite image in Photoshop. It may be hard to break the habit of resorting to old techniques, but the results can be worth the effort.
0 comments