Understanding Backgrounds

Backgrounds seem to be one of the most misunderstood features available using HTML. They are actually quite easy to use and if you have the right frame of reference then they make a lot of sense.

Notice the outer background, the brick pattern, on this page. I've heard it referred to as "wrapped around" the box containing this text and beginners have asked, "How do you wrap a background around a page?" I guess this is one way of looking at it, but I think that perspective may lead to confusion when trying to create the code for the page.

As it's name suggests, a background is back behind the rest of the page. You can think of it as being under the other elements which are on top of it. If you think of the page as layers, one on top of the other, then it seems to make more sense, at least to me.

Let's build a simple HTML template page to show how backgrounds work.

First, let's pick a main background for the page. I'm picking these for their contrast and striking nature, not necessarily artistic quality. The idea here is to show how it works, not make it pretty.

Here's a typical background graphic:

Notice that it is quite a bit smaller than the background area of a page. Background graphics are tiled by the browser to fill the available space across the whole page (or whole table in the following example). Let me create a larger space, using a table, and fill it with this graphic:

This whole area uses only the small graphic, entered once as the background attribute in the table tag, and tiles or repeats it across the available space, filling it completely. You can easily see the repetition of the pattern of coins. Can you see where one tile joins to the next?

When a graphic tiles so that the edges match and the pattern repeats without our being able to see where one tile joins to the next we say the graphic tiles seamlessly. Graphics that tile seamlessly tend to make the best backgrounds.

Below is an example of a graphic that doesn't tile well. It is about the same size as the previous example and I'll use a table in the same way with this graphic set as the background.

Let's see how it looks as a background in that table.

Notice how easily you can see the seams between the repeated tiles. This graphic does not tile seamlessly. Although it's not wrong to use such a graphic for a background, it's probably better to search out one that tiles seamlessly. You will have a much better looking page.

Once we have our main background in place we may want to create an inner area with a different background, perhaps an area where you will put text or pictures. This makes the outer background look somewhat like a frame and is probably why most people think of it as being wrapped around the inner part of the page.

For this inner background we could use a graphic that will seamlessly tile, just like on this page. Here we have the brick outer background and an inner background of soft faded numbers over which this text is written. This inner area with it's own background is like a layer on top of the original background. You can think of the outer background being behind, or under, the entire inner area. If you didn't specify a background for this table, it would show up with the underlying background like this:

We can also specify solid colors, using the bgcolor attribute and color numbers (see this color chart) instead of graphics. Here is the same table with a white background. Some early versions of Netscape will not render a solid color, using the bgcolor attribute, when it is used to cover an exising graphic. This problem is fixed in newer versions of Netscape and works in all other browsers. Here is our table area with a white background.

To continue our first example, using the coin background, we once again define an area within the background, like a box laying on top of it, using a table and put its own background within it:

In the above example I've used a single graphic as the background instead of one that would tile. I chose one that was big enough for the space I wanted to fill so it wouldn't have to be tiled. This takes a little care and consideration. You want a graphic that is the right size so it will fill the whole area without tiling but you don't want it too big or it will be cut off and may look out of place. You have to think about height as well as width because if the graphic is too short to fill the space you want it will tile down the page too.

You also have to consider the actual file byte size (not the display size) as a very large file will take excessive time to download. You can compress a background file quite heavily, from 50% to as much as 90%, as a little loss in clarity won't matter if the image is also faded.

How you go about coding the HTML for these examples and other background constructs you may want is covered on other pages on this site.

It's always the right time to use good code!

[ back | top ]