Free Tutorials » Blog Archive » » Placing text over an image using layers

Placing text over an image using layers

Posted by Mantasha in HTML on 06 27th, 2008 | no responses

Like the corresponding attributes for the <body> tag, you may define the background color and an image for the layer with the bgcolor and background attributes, respectively.[*] By default, the background of a layer is transparent, allowing lower layers to show through.

[*] Note that you may also control the background color, as well as many other display features of not just a single, but all <layer> tags within your document using style sheets.

The bgcolor attribute accepts a color name or RGB triple as its value. If specified, Netscape sets the entire background of the layer to this color, rendering the layer opaque. This attribute is handy for creating a colored box behind text, as a highlighting or attention-getting mechanism. It will, however, hide any layers below it, including conventional HTML content.

The background attribute accepts the URL of an image as its value. The image is tiled to fill the area occupied by the layer. If portions of the image are transparent, those portions of the layer will be transparent and underlying layers will show through.

If you include both attributes, the background color will show through the transparent spots in the background image. The whole layer will be opaque.

The background attribute is useful for placing a texture behind text, but it fails miserably when the goal is to render text in front of a fixed image. Since the size of a layer is dictated by its contents, not the background image, using the image as the background will cause it to be clipped or tiled, depending on the size of the text. To place text reliably atop an image, use one layer nested within another:

<layer>
  <img src="sunset.gif">
  <p>
  <layer top=75>
    <h2 align=center>And they lived happily ever after...</h2>
  </layer>
</layer>

Netscape sets aside space for the entire image in the outer layer. The inner layer occupies the same space, except that we shift it down 75 pixels to align the text better over the image. The result is shown in Figure 6.10.