Background Basics
by Toni Will-Harris

In life, we tend to ignore what's in the background. Of course, we do that at our own peril, but we do it nonetheless. On the Web, however, a background can have a huge impact on the look, feel, and "branding," of your Web site.

• Behind our screens: Why we created the backgrounds we did for this site.
• Bigger isn't better: Why size does matter when it comes to backgrounds.
• Miles o' Tiles: Just exactly how do browsers "tile" background images? I not only tell you; I show you.
• From top to bottom: Different shaped background images will tile differently. Yes, it's confusing, but I explain it so brilliantly you'll understand it!
• Tiling tricks: How to make those useful (if ubiquitous) color bars.
• More tricks: Anyone for stripes or curves?
• File formats: GIF or JPG—it's your choice, but choose wisely.
• The right size: Don't make your visitors wait.
• How'd they do that? How to save the background image from any Web site.
• Get back, Jack! What programs to use to make background images.

When backgrounds first came out, people went nuts. They used backgrounds that were so busy it was virtually impossible to read the text of the page. A few sites still make this mistake, but mostly people have settled down. In fact, many sites have gone to the other extreme and don't use backgrounds at all. They use a solid color, or, more often, just white. That's all fine and good, but hey, all these sites with blank backgrounds can start to look alike after a while.

What's more, a background image is a simple, fast, and effective way to make your site look unique and to remind your site visitors where they are. Honestly, I don't get sites with white backgrounds—what were their designers thinking? Nothing? As you scroll down the page on many sites, nothing is just what you see of the person or organization providing the site. If you give them nothing, you're losing a valuable opportunity to build a recognizable "brand," something that makes visitors remember your site, revisit your site, and tell their friends about your site. But they won't do that if they think, "I read something really interesting... where was that... hmm, well, it had a white background... that limits it to about 20 million sites..."

Behind our screens

At eFuse.com, we spent a long time developing our background image. We wanted the color to be calming, and we wanted the image to do two main things: 1) to "frame" the text on the page (and we did use plain white behind text because that provides contrast and aids readability) and 2) to repeat our eFuse.com name and logo. We limited our name and logo to the right—where it's unobtrusive, and where its darker color guides the reader's eye back to the white background of the "live" area of the page. So, it's a win-win situation. We help the reader by removing some of the "glare" of too much white in a background (especially where there is no text), and we help ourselves by building a recognizable image.

eFuse.com has two basic backgrounds: One is used for the home page and section pages while the other is used for articles, such as this one. Here they both are, shown at a reduced size. To see them at full size, click here to learn how to save any Web site background.

The section background uses a Web-safe "blend" of one of our standard web-safe colors (153,204,204), and white. That makes the color even more distinctive, because it's doubtful another site will have precisely this same shade.

Pages with articles have a white area behind the text and a wider bar of color on the right (for navigation and, in the case of some articles, "sidebars" of information).

Since browsers "cache" graphics (they store them on your hard disk so they don't have to download them repeatedly), using one or two background images on all your pages will help your site load faster.

Bigger isn't necessarily better

One mistake people make when creating backgrounds is to create huge backgrounds. They think it needs to be very wide and tall, so it will cover the background of all screen sizes. But in graphics, bigger always means slower, so this approach is usually impractical.

The next mistake is to make background images that are too small. Browsers can "tile" (or repeat) smaller graphics across and down the background of a page until they fill the entire browser window. But this, too, can slow down your site.

A background image can be as small as a single pixel, and in the past Web designers created extremely tiny (therefore supposedly fast) images that the browser would tile. But there's a catch: Tiling the background image takes processing power from your computer. The smaller the tile, the more times it has to be repeated. If you've ever been to a Web site and noticed the background seemed to appear slowly and scrolling was more like crawling, that page could have had a very small background image and your computer and browser were straining to repeat it.

Miles o' tiles

One of the things that's really confusing about background images is just how they tile. I'll explain it, but then I'll show it, too, because sometimes it's easier to understand by seeing than by reading.

Basically, a browser tiles a background image as many times as is necessary to fill the screen. It will tile horizontally and vertically. If the tile is not as wide as the screen, the browser will repeat the image, over and over, to the right, then to the bottom. If the graphic is a solid color, the result would be a background that was a solid color (even though it was made out of many little tiles).

The only reason to create a solid graphic background like this is if you want to create a blended Web-safe color and use it for your background. Otherwise, you can simply specify a background color from your Web authoring program. In NetObjects Fusion, you can easily choose a Web-safe color, or any color you want from Fusion's color palette.

If you want a pattern repeated across and down a page, then creating a smaller tile like the one below will do just that. Remember, though, a good background should have very little contrast, otherwise it will make text hard to read.

Tile from top to bottom

Now's where some people get really confused. Different shapes of tiles will tile differently. For example, if you have a wide background tile that is as wide (or wider) then the screen, but not very tall, it will only tile down the page, not sideways (because it already fills the screen sideways). But, if someone views that same page on a higher-resolution screen, their screen will be wider. If your tile is as wide or wider than their screen, then it will still only tile down. If not, it will tile down and across.

If you have a tall tile, the browser may only tile it sideways. I say may because if your page gets longer than your tile, the browser will also tile down the page. You're not getting a headache from all of this, are you? Let me show you.

Does it make more sense now? One thing that's confusing is that it's always relative. You're never sure how wide your visitor's screen is, or precisely how tall your page is (because if your visitor uses a larger font, the page will be longer).

Tiling tricks

OK, those are the basics of tiling. Then how do people get those popular colored bars along the left or right side of the screen?

The original graphic is as wide as a normal screen (and these days, "normal" is 800 pixels wide). The browser tiles it down the page. The end result is a colored bar along the left. The area on the right, which appears in the lighter shade, could be white, and then you'd have a color bar on the left, and a white background behind your text.

For people viewing your site on a wider screen, the background will tile across, and the result will be what you see above. Of course, you can make your background very wide to avoid that. eFuse.com's background is wider than 1,024, currently the high-end standard, so it rarely tiles horizontally. This allows us to control the viewing experience for almost all site viewers. While our background graphic is taller than the one shown below, it works on the same tiling principle.

A few more tricks

So how would you make a striped color bar along the left? Like this:

And how would you create a wavy bar along the left? Like this:

Graphic file formats

Background images can be either GIF or JPG (and actually, they can also be PNG, but few people use that format, even though it's supported by all newer browsers). It's important to choose the right format.

• If you have big areas of flat color, as we do at eFuse.com, you should use GIF. That will create the smallest files and the smoothest colors. You can create animated backgrounds, but it's not recommended for several reasons. First, it doesn't work right on all browsers. Next, it can slow down browsers to the point of crashing. Finally, it would be so obnoxious that your site visitors might try to find out where you live so they can stone you to death.
• If you have many colors, such as a photograph or an illustration with a lot of different tones, you'll be better off with JPG. The files will be smaller, and the transitions between colors will be smoother.

The right size

How big can a background image be and still be practical? Just remember that on average, each 2K of graphics takes 1 second to download. So if your background image is 24K, it's going to take 12 seconds to load. On eFuse.com, even though our backgrounds are fairly large, the files are only 8K, which means they take a mere 4 seconds. How can they be so small? It's because they use very few colors, only four, in fact: a light blue green, a dark blue green, black, and white.

The eFuse.com background image is 1,059 pixels wide by 409 pixels tall. We made it 1,059 wide because the maximum resolution of most computers is only 1,024. The height was determined by how large we wanted the logo on the right to be. Remember, this graphic repeats vertically, down the page. Those few people who have monitors that display 1,280 pixels across will see the background repeat horizontally for about 200 pixels—but most people with monitors like this don't have their browser window open from side to side because it's just too wide.

How'd they do that?

If you ever see a background you like, you can save it onto your computer, then view it using your own browser or a graphics program. To do this with Windows, click the right mouse button on any part of the page that is not a picture or link, and you'll see "Save background as..." as one of the choices. Select that, then save the file (it can be helpful to save it to your desktop so you can find it more easily).

If you want to view the background in your browser, untiled, simply drag the graphic into your browser window from the desktop, or the Windows Explorer.

On the Mac: Hold down the mouse button for two seconds. You'll then see a menu that says "Save background as..." (or something similar—the exact wording it varies from browser to browser). Choose that, and save the file to a place where you can find it easily, such as the desktop. To view it, drag it into your browser.

You can learn a lot by looking at other sites' backgrounds.

Warning: Never use someone else' s background on your site. Background images, like everything else on the Web, are protected by copyright laws. And if you use someone else's background without written permission, you are violating the law. You can be sued. It can cost you real money. The only exception to this are sites that specifically say their artwork is public domain or shareware.

Get back, Jack!

OK, so now you know the basics. The best way to really get a feel for this is to open a graphics program and start to experiment. We used CorelXara for our background images because we find it to be the fastest and simplest way to produce Web graphics. But you can use PaintShopPro, Photoshop, FireWorks, ImageReady, CorelDraw, or whatever graphics program you like.

Don't expect your backgrounds to be perfect the first time out—it does take some trial and error. But once you get the hang of it, your Web sites can be more distinctive, more appealing, more memorable, and more effective, and it will only take a few seconds of your site visitor's time.

About the Author

Toni Will-Harris is a writer, designer, and naturalist who runs the Point Reyes Chipmunk Observatory and Gardens. She can be reached at Toni@Will-Harris.com. This picture is not recent—or actual size.