Wrapping Text Around Images

HTML doesn't let you wrap text on both sides of images easily. You can wrap text around three sides of an image aligned to the left or right of the containing tag by adding an align="left" or align="right" attribute value to the <img> tag.

If you want to insert an image in a text line—for example, an icon or small image—you can place the image by centering it in the text line (see Figure 2.10).

Figure 2.10: Inline images (ch2-10.htm)

Background Images

Both IE and Netscape support background images. You specify the background image as an attribute to the <body> tag:

<body background="http://myserver/mysite/someimage.gif">

The image appears on the page as a background image, which means that any other content appears on top of the image—in other words, the z-order of the image is zero. As an example, I've plotted a list on top of an image in Figure 2.11.

Pfc OB fj.riiii. rvJi r-fct [tTTI

Pfc OB fj.riiii. rvJi r-fct [tTTI

Figure 2.11: Background image

Figure 2.11: Background image

The first thing you'll notice about this image is that it's plotted multiple times. That's because the browser tiles the image across the entire background. Tiling an image means that the browser plots it at the upper-left corner and repeats the image across the horizontal width of the page. When it reaches the right edge, it begins plotting again at the left edge below the first graphic—the same pattern that people use when reading a book. The browser tiles the image because the technique was meant to make it easy to display a patterned or textured background image. If you need a single image, you should plot it explicitly.

IE makes it possible to plot a single background image as a watermark. A watermark image is not tiled. Like a watermark on paper, it's an image plotted one or more times, usually centered vertically and horizontally. Like a standard background image, a watermark has a z-order of zero, so all other content plots on top of the watermark image.

Was this article helpful?

0 0

Post a comment