The Lazy Webmaster - January, 2004 - by Susan Ives

Background Images

By Susan Ives

A few months ago, while searching for background image tiles, I stumbled across a site that used to offer free tiles but no longer does. The Webmaster said, "The tiles are no longer available. There are enough ugly Web sites. White is the new black." She has a point.

But before we get into a debate about the aesthetics of background images, let's define some terms.

Background image: HTML allows you to place a background image on a Web page. A pointer to the image is placed in the <BODY> Tag: <BODY background="filename.gif"> By default, the image will tile, or repeat until it fills up the screen.
Seamless tile: Many background images are tiles. Just like floor tiles, they repeat to form pattern. If you want a yellow burlap or green marble pattern, for example, you do not have to have a huge graphic that fills the screen. A relatively small patterned tile — sizes vary, but about 125x125 pixels is typical — will repeat until it fills the screen. They are called seamless because the images are manipulated so that you can't see where the tiles are joined (more about that later.) Tiling is a good thing. It allows us to have small background graphics that do not hog bandwidth. Most importantly, they fill the screen. If you had to make a graphic to fill the highest screen resolution, it would have to be 1600 pixels wide. A 125 pixel-wide tile will repeat itself 13 times for the high resolution and about 5 times for a 640x480 screen. What a deal! The computer does the math for you.
Fixed background: Internet Explorer accepts a fixed background tag that looks like this: <BODY background="filename.gif" bgproperties="fixed">. This keeps the background image in a fixed position (although it will tile until it fills the opening screen) and then floats the text over it. The image will not scroll with the text. It can be a beautiful effect, but it doesn't work at all in Netscape Navigator. Before you use it, make sure it doesn't turn ugly in other browsers.
You can also create a fixed background in CSS, Cascading Style Sheets. This will work on some versions of Netscape (ver 5 and above.) You can not use a background image in the <BODY> tag if you use this code, but you can specify a background color. This graphic will not tile at all. The code for this is:
<style type="text/css">
body
{
background-image:
url("filename.gif");
background-repeat:
no-repeat;
background-attachment:
fixed
}
</style></head><body>
You can see an example in the popup window here. Make sure to try the scroll bar!
Background color: You can also specify a background color for your page. If for some reason your background image fails (either because of browser incompatibility or because the user turned his or her autoload images off) it's a good idea to have a similar bg color. If you have a dark background image and use white text, if the image doesn't appear you could end up with white text on a white background. There's a list of Web-safe color names at www.w3schools.com/html/html_colornames.asp. The code for a background color is:
<body bgcolor="#00FFFF"> or
<body bgcolor="MediumSpringGreen">

Making your own seamless tiles:
Here's the really lazy tip. Adding original tiles to a page can be elegant and appropriate. I did this with the SAVAE site, using a photo of a fragment from the Dead Sea scrolls as the base. If your tile isn't seamless you will see joints. You've seen that before — it's when you can see boxes in the background. To make a seamless tile by hand, you have to cut the graphic in equal quarters, flip them, rotate them 45 degrees — oh, I can never get it straight and you won't, either. There are programs that will do this for you and also a free set of plugins that work with PaintShop Pro and Adobe Photoshop. Download the filters at www.btinternet.com/%7Ecateran/simple/.

Web bonus! Scrolling background:
This is a code snippet I picked up from Boogie Jack. I love that man. If you are using Internet Explorer you will have noticed that the background is scrolling. If you are using another browser, I hope you didn't notice anything - no error messages, no weird stuff. Just cut and paste this code anywhere nested under the <BODY> tag. I stuck it at the bottom of the page. If something does go wrong, the rest of the material will load first. I wouldn't overdo this one - make sure it looks good with your background and doesn't distract from the main content.

<script language="JavaScript">

</script>

Looking good: White is always tasteful and never gives anyone any trouble. Look at the big, expensive, professionally-designed sites. Most have a white background. Solid colors are also relatively safe. But safe can be boring. If you do use background graphics, make sure that they make your site more attractive and easier to navigate, not uglier and illegible. Keep in mind that backgrounds consume bandwidth and will make your site load slower. A compromise between a nifty background and legibility is to have your text on a solid-colored table with just a border of the background showing. (I did that on this page.) You can specify the table background color in table, rows and cells just as you do in the tag: for example, <TABLE bgcolor="White"> or <TR bgcolor="#EEE9CA">.

Look at Web sites critically. Train your eye. Learn from the pros. The background sets the mood for the entire site. Architect Frank Lloyd Wright said, "Form follows function - that has been misunderstood. Form and function should be one, joined in a spiritual union." I bet he would have made one heck of a Webmaster.

Susan Ives is a former president of Alamo PC. She archives these columns on her Web site, www.susanives.com/lazy. If you visit, you can cut-and-paste the code instead of retyping it from the magazine - the ultimate in lazy Webmastering!