1 pixel transparent GIF

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.

In this case the third technique is used. A GIF consisting of a single pixel was created. The colour of the pixel was marked as transparent and the size of the displayed was "stretched" using the <img> tag's height and width attribute. The align attribute was used with the value left to ensure that the invisible stretched image appeared at the left hand side of the page thereby forcing the text to lie to the right of the image.

In using this technique, you may need to experiment with the values for height and width. height is particularly tricky, if you make it too small, text will flow "underneath" the transparent overlay, too largen and there's a large amount of blank space at the bottom of the page. Of course, the correct height depends on the width of the browser image over which you have no control. Try re-sizing your current browser to a very narrow width and see what happens.

Here's the HTML that appears at the start of the page You may have noticed the "alt" text for the transparent overlay before your browser downloaded the overlay, you would also have noticed how the browser reserved the amount of space indicated by width and height attriubtes. 

<body background=patt2b.gif>
<img src=pixel.gif width=245 height=1000 
align=left alt="1 pixel transparent GIF">
<h1 align=center>A large image</h1>