Adding Background Patterns in HTML, XML Codes
Bill Biega's

Biega Home Page

Computer Help
Special characters, colors.
East Europe
Cities, Countries, Info.
Genealogy, History Essays
Cities, Countries, Historical
Photo Gallery
Places I visited

all over the world
Syrena Press
13 Is My Lucky Number
Learning LINUX

In Association with
Contact us by Email

You can make your web page more visually interesting by providing a background. However you should be careful to avoid "noisy" backgrounds that make it difficult to read the text.

This is how you do it. In the the body line of code, that starts with the expression <body , add the words: background="...gif". Place the name of the background picture in either .gif or .jpg format.
For example: <body background="hatch.gif"> has been used for this page.

hatch background Keep the size of the graphic small to prevent slowing down the loading of the page. It should not be more than 10kB in size. Note that a small graphic automatically repeats as many times as necessary to fill in the whole page. Therefore you should make sure that the left and right edges are similar, as well as the top and bottom edges. The color of the graphic should be very light, so that the text is clearly readable, as in this example.
Note that if you print the page, the background itself will not print. Likewise any other graphics, or tables with different colors, will cover the background. This paragraph has been set up as a table with white background color.

You should also resist the trap that many web-page designers fall into:- adding flashy visual effects such as flashing banners and moving pictures.
These effects are certainly interesting to look at, but they add significantly to the time that it takes for the page to download into the reader's computer. The vast majority of home computers still access the Internet by telephone line via modems with throughput speed no higher than 56kbits/sec. Even if you use a high-speed broadband connection such as DSL, you will notice that some pages with large amounts of graphic content load much more slowly because they are being provided from overloaded servers.

For examples of pages with other backgrounds, see:
Warsaw's Mermaid, with a light blue background and Syrena watermark,
Sailing Destinations, with a water background,
History, with a map of Europe background.
Note that the last two pages come up slower on your screen than the first example, because they are down-loading graphics from

See for a great selection of backgounds.
For a comprehensive guide to the design of HTML and XML pages, see Jennifer Kyrnin's excellent Web site.

Return to Top of page.
Return to Table of Contents for other Computer Help pages.-->


Return to Home Page.
Copyright © 2002 B. C. Biega. All rights reserved.

Last update May 2002