|
Beginner Tip:
Background Colors And Images
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
It's a basic tenet of Web design: color loads fast; images (usually) load slowly. Take this into account if your Web site uses a background image - especially a dark image with light text. Include a complimentary background color to provide an easier visual transition to the slower-loading background image.
Careful With All Page Backgrounds
A background image can be a dangerous tool in the hands of a novice designer. Think about some of the truly ghastly tiled background images you've seen on Web sites: plaid, psychedelic, whirlpools, etc. That's not to say that all background images are bad. Used carefully, a visually appealing page background image enhances a site by emphasizing the site's purpose.
For instance, a Web site that sells Fall foliage tours in New England might use a background image of autumn leaves. Since this background is rather dark, we use light-colored text for contrast.
<body background="m50leaves2.jpg">
<div align="center">
<h1>
<font color="White">
<b>Fall Foliage Tours</b>
</font>
</h1>
<h2>
<font color="White">
<i>Register Now!</i>
</font>
</h2>
<h3>
<b>
If you don't see the solid
background color first,
<BR>
be thankful for your
fast Internet connection!
</b>
</h3>
</div>
</body>
|
Note there is no background color specified, so your visitors are treated to a glimpse of the standard gray background while they wait for the image to load. Avoid this by including the BGCOLOR attribute in the BODY tag. Select a complementary color (dark red, for instance) for the attribute to give visitors with slower dial-up connections a smoother visual transition from page background color to background image.
View the example here.
<body background="m50leaves2.jpg""
bgcolor="#800000">
<div align="center">
<h1>
<font color="White">
<b>Fall Foliage Tours</b>
</font>
</h1>
<h2>
<font color="White">
<i>Register Now!</i>
</font>
</h2>
<h3>
<b>
If you don't see the solid
background color first,
<BR>
be thankful for your
fast Internet connection!
</b>
</h3>
</div>
</body>
|
Visitors with fast Internet connections may never notice your efforts, but those connecting at 28.8 or less will appreciate the easy color transition.
Table Backgrounds Also Benefit
Tables can also contain background images and colors, but Netscape resolves the BACKGROUND attribute differently than Explorer. Remember to use the BACKGROUND=" " attribute inside nested tables to prevent Netscape browsers from repeating the background image inside every cell.
Netscape also resolves background colors differently than Explorer. The BGCOLOR attribute contained in the outer table takes precedence over the background image so the internal table cells display the BGCOLOR instead of the image. Your background image displays with big blocks of color in every cell in the internal table containing text.
Here is how that displays in Netscape:
If you're sure that your Web site will only be viewed with Explorer - a company Intranet for example - then you can safely use complimentary background colors with a table image. In this example, we use a JPEG file as a background image for a table. For effect - not because it's a complementary color! - the BGCOLOR attribute is set to "blue." The table will flash blue before the image loads.
View the example here.
<body bgcolor="#EFF0E3">
<div align="center">
<table background="background_sm.jpg"
bgcolor="blue" cellspacing="2"
cellpadding="2" border="0" height="400"
width="250">
<tr>
<td>
<table background="" align="center"
cellspacing="0" cellpadding="0"
border="0">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
|
Important Design Considerations
It's hard enough for people to read on a computer monitor, so make sure your page background choice doesn't make the task even more difficult. Look to the pros for guidance: most commercial Web sites use a white background with black text. That combination offers the highest contrast and is the easiest to read. Many beginners though, prefer tiled background images because it's a neat trick and easy to do.
It's also an easy way to unintentionally brand your Web site as amateurish, so be careful. Use background images sparingly and optimize them with GIFBot because images do increase your page load time. Since some of the most basic techniques often display differently across browsers - and browser versions - test your Web site thoroughly. NetMechanic's HTML Toolbox makes this task easier by scanning your Web site and alerting you elements that may not display correctly across browsers.
|
