Background Images

Some of the HTML tags have a background parameter, we shall be considering this paramter within the <TABLE> tag and how we can add a background image. Finally by adding to the style definition for the table we shall refine our use of a background image

The simplest use of a background image is to provide a texture. In this instance we take a small image of, say 20 pixels square. It is repeated both horizontally and vertically to create the effect we desire. Below we have the opening definition for a table with the background parameter defined. In our example we are setting the background to be the image bgnd.gif. For clarity other table parameters have not been included.

In the example given our aim was to add a texture to the background of the table. Our next step is to consider a background image which should only be repeated in one direction. An example of this would be an image which begins solid and then fades out. Clearly it would be inappropriate for this to be repeated on the webpage 700 pixels further to the right. The examples below are for an image to repeat down the left, leftBar.gif, and across the top, topbar.gif, of the page respectively.

Now consider the large slightly faded image of the company logo which needs to be placed near the centre of the table. In this example it is not appropriate to have it repeating. Our table definition therefore becomes:

Finally, in the examples given we have used a large image which is padded with white space, for example, to move the image to the correct position. If we consider a logo which we wish to position in the middle of the screen this may be a left and top margin of, say, 200 pixels. This part of the image is not providing any information and will make the image wasteful of bandwidth, with a more perceptible download and rendering delay. To overcome this we can use a smaller image which we will move to the right and down to the position we require.

NAT July 2005