Global Settings with the <body> Tag 97Structural
TagsGlobal Settings with the <body> TagWeb Design in a Nutshell, eMatter Edition- Keep file sizes small. As usual for the web, it is important to keep the file size
as small as possible for background graphics, which often lag behind the dis-
play of the rest of the page. Effective stripe effects can be created by repeat-
ing a graphic that is very wide, but only one pixel high (or vice versa). - Provide a background color specification in thetag that will display
while the background image downloads. In some cases, the background
graphic may be the last element to display on the page while background col-
ors display almost instantly. It is a nice trick to specify a background color
that matches the overall intensity and hue of your background graphic, to at
least set the mood while users wait for the background image to load. This is
particularly useful if you’ve got light-colored text or graphics matched to the
background graphic which will look unreadable or just ugly against the
interim default gray browser background. - If you want the color of the background image to match other graphics posi-
tioned inline in the web page, be sure that they are saved in the same graphic
file formats. Because browsers interpret colors differently for JPEGs and GIFs,
the file formats need to match in order for the colors to match seamlessly
(GIF with GIF, JPEG with JPEG). - Non-web-safe colors (colors not found in the Web Palette) are handled differ-
ently for background images than they are for foreground images when the
page is displayed on an 8-bit monitor. This makes it very difficult to match
inline images to the background seamlessly, even when the graphics use the
exact same color (or even when using the same graphic in both places).
To make matters worse, the way they are handled differs from browser to
browser. For instance, on the Mac, Netscape dithers the foreground graphic
but shifts the background graphic to its nearest Web Palette value. In Internet
Explorer, just the opposite happens: the background image dithers and the
foreground image shifts. If you are trying to create a seamless effect, either
make your foreground images transparent or stick diligently to the colors in
the Web Palette.
The Web Palette is explained in the section “Color in Browsers—The Web
Palette” in Chapter 3,Web Design Principles for Print Designers, and further in
Chapter 17,Designing Graphics with the Web Palette.
Adjusting Browser Margins
By default, browsers allow a margin of 10 to 12 pixels (depending on the browser
and platform) between the browser window and the document’s contents. It is
possible to add attributes to the
width. The margin may be removed completely, allowing objects to sit flush
against the window, by setting the attribute values to 0.
The drawback is that Internet Explorer and Netscape Navigator use different
attributes to control margins. In addition, Netscape’s tags only work with version 4.0
and higher. If you want to reach a broader audience, you can use frames for a
similar effect (see “Frame Margins” in Chapter 11).