You probably know that you can place an image inside a table cell, like this:
<td><img src="/image/library/english/10077_mercury.jpg" width="200" height="200"></td>
You probably also know that you can set the background color of a table cell, like this:
<td bgcolor="#FF0000">Behold, the planet Mercury</td>
But did you also know that you can use an image as the background of a table cell? It works like this:
<td background="/image/library/english/10077_mercury.jpg" width="200" height="200">Behold, the planet Mercury</td>
Doing it like this allows you to superimpose HTML content, as Figure 37.1 shows.
TIP
The width and height attributes of the td tag describe the size of the table cell, not the size of the image. Older browsers may clip the size of the cell to match the amount of content it contains, even when you specify precise width and height values, which can crop your background image. |
<table> <tr> <!-- Set the valign attribute to bottom to push the text to the bottom of the table cell. --> <td valign="bottom" width="200" height="200" background="images//image/library/english/10077_mercury.jpg"> Behold, the planet Mercury </td> </tr> </table>
This technique works best when the amount of content you want to superimpose is not likely to cause the table cell to expand beyond the width and height values of the image. Otherwise, the browser tiles or repeats the image to fill the extra area, as in Figure 37.2, which may not be the effect you want to achieve.
GEEKSPEAK
Tiling is repeating an image to fill a given area. |
TIP
Make sure that your text is legible against the background image, unlike the examples in this topic. One of the most common design problems on the Web is poor contrast between foreground and background. If you can't find a color or style of text that stands out enough from the background image, don't use a background image. |
<table> <tr> <!-- You don't need to specify the valign attribute here, since the text fills the200-by-200 cell. --> <td width="200" height="200" background="images//image/library/english/10077_mercury.jpg"> <p>Behold, the planet Mercury. It is one of the hottest places in the solar system due to its proximity to the sun.</p> <p>The planet Mercury is a small, arid, lifeless, desolate, sun-baked excuse for a heavenly body. Hardly anyone bothers to study it.</p> <p>Its only notable quality is the speed with which it orbits the sun, from which it derives its name. In Roman myth, Mercury, with wings on his heels, was the messenger of the gods, a divine postman and errand runner, the swiftest of deities.</p> </td> </tr> </table>
Unfortunately, HTML doesn't give you additional attributes for fine-tuning the behavior of background images, but CSS does (see Topic 38).