In the background
We’ve talked about images before, but there is a use of images which was no more than mentioned. Background images are used for two principal reasons: purely decorative, or to define sections of a page. Both uses often run into problems when not handled with care.
The first problem should be familiar: if the image is too large, in kilobyte terms, it will take a long time to load. This is no different from from the considerations of the size of any image. However, because background images are often large it is easy for them to be excessively weighty. Choosing the correct file format and the compression level is more important than ever with background images.
Getting the screen size of the graphic right is vital too. When an image is incorporated in a page using the <img> tag, it is there at the specified size and that’s it. When it is used as a background graphic by placing the argument background="image.png" in the <body> tag, the image will tile across the screen if it is not big enough to fill it. Sometimes that is the intention: a subtle pattern tiled across the screen can produce a stylish appearance.
The important word in that sentence was subtle. Nothing makes a page look more like a dog’s dinner than garish tiled backgrounds.
Never forget that background images underlie every other page element. Text must be readable over it, or there is no point putting the page up at all. Aside from simple questions of taste, that is the most important reason for using subtle tiled images rather than bright primary colours and bevelled edges. Here’s a particularly bad example of a background image interfering with a page’s legibility.
Note: finally, some time after Sir Fred Hoyle’s death, the background image (a grid of grey dots on a white background, as far as I could see) has been removed, and the page is now legible. The original appearance can be seen via the Wayback Machine.
The best tiled backgrounds never look tiled, they frequently are a simple (and, again, subtle) texture designed to tile seamlessly to, for example, give the appearance of parchment or canvas. On the other hand, where it is at all obvious to the eye that the image is tiled, the pattern becomes incredibly distracting.
Background images may be used for more than simple decoration. You may wish to have a section of the page — often a column at the left or (less frequently) the right of the page — which is a clearly defined navigation menu. Frequently the menu will be constructed using a table, usually with the BORDER attribute set to zero since even a setting of "1" gives a thick, bevelled and fairly ugly border. It is possible to construct a menu using only tables which is clearly differentiated from the surrounding page — examples of this technique can be seen at Amazon — but for some sites it is much simpler to create a background graphic to separate different functional areas on the page.
An example of what I mean can be seen on the wee site I created for some Druid friends, Caer Clud.
Note: the site’s design has changed and the background image discussed is no longer used.
Once you are in the main part of the site, the main body of the page is on a white or very slightly yellow background (depending on the page) while the menu at the left is on a green background. This is very simply achieved by creating a GIF with a green band at the left of the appropriate width.
Because there are two different possible background colours for the rest of the page, the rest of the GIF has been set as transparent — it could just as easily have been accomplished by having two separate GIFs, although that would lose the benefit of having the one image cached.
Using a background image in this way may encounter a problem if the image tiles horizontally. If you have a monitor resolution of 800x600, you may create a background GIF 800 – 900 pixels wide and get perfect results on your browser:
What happens, though, when I come along using a 1024x768 (or higher) resolution monitor? Very probably the menu will still look fine, but the vertical band of colour you have designed for the menu’s background will make a second appearance on the right of the page:
This looks sloppy whether or not the text spreads over the second vertical bar or not. It is, of course, another instance of something I have said many times: you must always remember that other people use different hardware/software combinations than you do.
The way to avoid an image tiling and messing up your design is to make it wide enough that anyone coming to your site with whatever monitor setup can see it as you intend. That actually means very wide, since there are some large monitors out there.
It may be unlikely that users of big, high-res monitors will have a browser window opened to the full width of the screen, but you don’t know. The only safe approach is to make the image substantially larger than any screen resolution it is likely to encounter. The Caer Clud background graphic is 1768 pixels wide, which should be sufficient.
Note that it is only horizontal scrolling which we want to avoid. The technique actually depends on vertical scrolling — no matter how long the page, no matter how extensive the menu becomes (although lengthy menus are a bad idea), the separate colour background will always be there. In fact, there is no need for a graphic more than a few pixels high. The image used in the Caer Clud site, and for that matter the one in the example screenshots above, is only 10 pixels high.
If the thought of an image over 1700 pixels wide makes you concerned that the graphic will be huge and take forever to load, remember how efficient GIFs are at handling solid blocks of colour — the Caer Clud background image is only 4kb.
It may have occurred to you that the technique could also be used to define a menu at the top of the page, using a GIF which was, say, 1768 pixels high by a few pixels wide. The problem with that is that the height of a page is much more flexible than the width and is wholly determined by the contents. Again, you may look at it on your setup and think everything is fine, but someone else may enlarge the text size in their browser, leading to much longer pages and the appearance of horizontal stripes under the text.
The final thing which you must pay attention to in creating a background is the question of the readability of the page’s text. Some aspects of this we have already touched on, but it is worth dwelling on it because so many pages get it disastrously wrong.
- Colours. The colour of the background and the colour of the text must contrast enough to be easily readable across a range of screen resolutions and monitor gamma settings. Avoid strong, glaring colours in the background — it is almost impossible to read text against such a background. Take a look at sites where a light background colour is anything other than white and you will find that the successful ones tend to use pastel shades — very soft, easy on the eye, and they increase the contrast with the text.
- What if the graphic doesn’t load? This can happen if memory is tight or because of a mistake in the markup. If the image is either white or a very light pastel shade with black text, there may be no problem. However, if you are using a dark background with white text, failure to load the background graphic means that the browser will use its default setting for the page’s background colour — frequently white. White text on a white background is not a good idea — so set the background colour of the page in the
<body>tag to the predominant colour of the background image. - Link colours. This is important enough to be considered separately. Your body text may make a good contrast with the background, but what about your links? Remember, the default for links is blue unvisited, purple/red visited — if you are using blue or red backgrounds you need to make sure that your links don’t get swallowed up. Again, don’t forget to make sure that links are visible if the background doesn’t load.
- Patterns. The human eye finds patterns very interesting; if you use a pattern which is too obtrusive, the eye focuses on it rather than the text. Obtrusive patterns almost certainly incorporate different, contrasting colours; some of these will not contrast with the colour of the text. Reading it will be like reading a notice covered with camouflage netting. Any patterns underlying text need to be very subtle — a texture rather than a perceptible pattern. There’s scope for having a decorative pattern beside the text, of course — but be very careful if you try to place something like that to the right of the text. You have limited control over how wide the text will be or precisely where it will be placed on the page.
- Tiling. Really, this is a special instance of a pattern, but important enough to be considered on its own. Remember, any background image will tile if it is smaller than the browser window. CSS gives the ability to stop tiling, either completely or in one direction only; note that this will not work in Netscape 4 and other obsolete browsers. Even a subtle pattern will become obtrusive if the adjacent edges don’t merge smoothly. If you use a multi-coloured square image with bevels and a defined border, that is a sure way to make the page both horrible and unreadable. You may have a graphics package which is immensely powerful with a wide range of very clever functions — that is not a reason to throw them all at the screen at the same time!
To finish off, as it’s Christmas, here’s something which may bring a smile to the face. It is a truly awful Web page. Deliberately so: it’s on the BBC’s Chewin’ the Fat site, and is supposedly the home page of Ronald Villiers, the utterly crap actor featured in the series. It features many awful things I’ve mentioned in this site and some others besides. To see the full horror, visit it with JavaScript on and try it out using both Internet Explorer and Netscape if you can. Go to “Ronald Villiers’s” web page.
Don’t expect any new web design articles for a couple of weeks, as I’m planning on having a life. Have a good New Year!
© DC 2000. All rights reserved.
