A large image

 

This page demonstrates the presentation of text with a large background image. The background image has been deliberately chosen to be large and strongly coloured, it consists of the brightly coloured area to the left with the rest of the image white which, of course provides a suitable background for text, however unless the text can be persuaded to start suitably far across the screen, the background image interferes with the visibility of the text.

There are three techniques by which this problem can be avoided

  1. Enclosing the text in multiply nested <ul> ... </ul> tags. Since list bodies are indented this could achieve the desired effect, however this is not what lists are intended for and the amount of indentation is browser dependent.
  2. By putting all the text in a borderless table cell with a separate content-less cell of defined width overlaying the image.
  3. By using a left-aligned image of suitable width and height placed over the decorative left margin. The image can well consist of a transparent GIF with a single pixel.

The bulk of this page consists of a table with one row and two columns. The first cell is empty and is painted over the border image. The width is set so that the second cell, which holds all the text, lies just to the right of the image. The table is, of course, borderless.

Here's the HTML that appears at the start of the page 

<body background=patt2b.gif>
<table border=0>
<tr><td width=245><td>
<h1 align=center>A large image</h1>
This is followed by the bulk of the text followed by the table closing tag <.table> immediately before the </body> tag.

It should be noted that the width attribute of the <td> tag is not strict HTML 3.2