8.4 Background Images

As well as inserting images directly into webpages using the image tag, almost any element in HTML can also have background images attached to them, although only 1 image per element is allowed. This can be accomplished using the versatile style attribute and can produce some interesting effects.

For example, it is quite common to attach a background image to the body tag. This is something that is better carried out using CSS, which will be dealt with later, but to do this from within a HTML document it goes something like this:

<body style="background:url(images/picture.jpg);">
Picture

Here the value of background has been set to url(images/picture.jpg). The image being used is shown on the left and is 128x128px in size and was downloaded from a free web graphics site.

The code above would bring in this image stored in the folder mentioned and attach it to the background of the body tag - click here to see the result. Note how the image has automatically repeated in all directions to fill the whole of the browser window - this is known as tiling. Other elements, including other images, can then be placed over this background in the usual way by writing elements into the HTML document between the <body> tags.