Design NotesYour selection of background, text, and link colors are both a technical action that you accomplish though the body tag—and a design decision. Too many people overlook the design decision component and end up with a detail-filled background with green text and magenta links. Why? Because they could! As you can imagine, readers will quickly flee from these nasuea-inducing pages.
Background Images The background attribute lets you select an image to use as your background. It's important to remember that selecting a background image is not the same as selecting an image that nestles into your page amongst other content.
Some suggestions for good background image choices:
Select an image that won't be distracting. Make sure that people won't be looking at you background and ignoring your content.
Select an image that isn't too busy. If you have an image with many small pieces and lots of detail, it will be difficult to read any text you place over it.
Select an image that isn't too bright. No matter what color text you select, it will be overwhelmed by a vivid background image.
Select an image that will tile the way you want. All images tile. If you want a single image to fill the broswer window background, be sure you give some thought to how the image will look if the reader's window is sized larger or smaller than you are desiging for.
Select an image of reasonable file size. A sure way to annoy your readers is to have them wait and wait for a large background image to download.
Select an image that is compatible with the text color you are using. For example, don't place an image with darkbrown tones under a page that is using brown text—you'll only end up with a muddy glob that no one can read
Interaction of Background Image and Background Color Using a background image doesn't mean you should ignore background color. Remember, not everyone has graphics turned on. Some readers may be trying to view your page without the background image loaded.
Select a background color that is close to the main color of your background image. That way, if readers have their image loading option turned off, they will still see a color that is compatible with your type.
Select a background color that meshes with your text color and supports the content of your site. For example, photos might stand out well against a black background, but it can be painful to read pages and pages of small white text.
And a good overall rule of thumb: when in doubt, keep it simple. Having a legible page is far more cool than having a fancy background that hides half the text and is impossible to use.
Email this article
Print
Previous Page: Text and Link Colors
Dzone.com
Digg.com
Slashdot.org
Reddit.com
Del.icio.us
