A Little Background
by Heather Champ
While it's usually the elements in the foreground, such as navigation elements, images, or content, that catch a user's eye, the background is something not to be pushed into the background. Given that there are so many variables across multiple platform and browsers, there are a few considerations to make to ensure that what you see is what the user will get.The Elastic Web
The Web is an elastic medium, and although one can try to code specific precise pixel placement, there is a certain amount of chaos theory that will enter into the mix. Although table coding allows for a mostly reliable arrangement of the foreground elements, there is no real easy way to specify a precise alignment of the table with the background. Different browsers have a different offset of the first element from the frame border. This can vary up to 10 pixels. It's possible to work around this with frames, but it introduces an entirely new can of worms.The Left-hand Stripe
Many sites now incorporate a left-hand stripe that easily identifies a navigation system. It's rather like fake frames, but in the end it's an elegant solution.If the stripe is unadorned with additional pattern, the image need only be a single pixel in height. It's important to remember that as it repeats down the page, given the opportunity, it will repeat at the right as well. It's better to create an image that is well over 600 pixels in width. I've gone overboard on occasion and created 1,200-pixel-wide GIFs. Although this may seem to be overkill, the exaggerated width doesn't really add to an increased GIF size. Even a user with a glamorous 21-inch monitor will not resize to the point where the stripe repeats.
Defensive Coding
If you decide to use a background GIF, it's a good idea to include a solid color code as well. The solid color will load first, creating a reasonable representation of the documents designing until such time as the slower, larger background loads. Pick a color that is similar to the majority of your background. The body tag would look like this:
<BODY BACKGROUND="..." BGCOLOR="#..." etc.>Extending the realm of the "Internet Safe"
Lynda Weinman's Coloring Web Graphics introduced the "hybrid colors," an idea developed by Don Barnett and Bruce Heavin while working on a prototype website for DreamWorks Interactive SKG.Designers balk at the idea of only working with the 216 "Internet Safe Colors," those colors that should display properly across multiple platforms and browsers. Hybrid colors are created by "mixing" two of the 216 in a GIF where individual pixels are placed side by side. When this small GIF is rendered as a background, the eye mixes the two creating a third safe color. Given that there are relatively few good light or pale colors, it's possible to create quite a few very pleasing colors that are generally considered to be a better choice if for text-heavy documents. Images or graphics floated over such a color will have to be made transparent on one of the colors so there is a small risk of a halo occurring. The best results are created by choosing two analogous colors. It's a great way to expand color horizons while ensuring a design look good for a variety of users.