| |
 hen the possibility to specify a tiling image for the
entire page background was introduced by Netscape, few designers
could envision anything beyond the "classic" scheme of a
middle-sized, repeating rectangular pattern, most often representing
some natural texture or surface. Since then, however, a number
of more creative approaches to using <BODY BACKGROUND> have
appeared, almost driving the original technique into oblivion.
If you still think you need your background to tile in both directions (horizontally
and vertically), there are a couple of issues you must be aware of.
First, unless your image is perfectly homogeneous (then, why use an image
at all?), you're going to have a hard time trying to make the repeating
pattern non-obtrusive. Even if you've made your junctions seamless
(e.g. using these instructions), the fact that
the same image is repeated in a rectangular pattern is almost impossible
to conceal from the human eye. This repeating may be extremely annoying,
especially if nothing in the texture itself suggests any regularity (which
is almost always the case with natural surfaces).
Even if repeating the image looks OK, tiling backgrounds are
often objectionable for another reason---they fill the entire span
of the browser window (the only exception being table cells with
BGCOLOR attribute). It is not unlikely that the texture, while
looking perfect with the page heading or navigation bar, becomes an
annoyance in the body text area. A better solution might be
either abandoning the page background in favor of incorporating the
same texture right into the pieces of graphics where it is needed,
or using a non-tiling background.
The first in the non-tiling variety were background images which
repeated only in one direction---say, if you make the tile wide
enough (wider than a browser window can possibly get), its copies
will only stack up vertically, allowing you to create vertical
strips and divisions across the page. This is most often used
for making navigation sidebars on the left (such as the one on the
Webreference's front page), although horizontal-only
tiling, usually with a horizontal bar at the top, is also used.
By expanding the background image in the other dimension, we get
a background which is not subject to tiling at all. With this
method, you can provide a different background texture for every
point of your page's canvas---in fact, you get an additional graphic
layer with arbitrary contents, underlying both graphics and text on
your page. This technique, used by many professionally designed
pages (such as the Iconoclast page mentioned in the previous
section), gives you the most creative control over your page's
layout.
Naturally, a non-tiling image must be large (at least 1200 pixels
wide; its necessary height is determined by the contents of the
page). To
keep file sizes down, only GIFs with small color depth or (more
often) JPEGs with high compression levels are used. The loss
of quality in highly compressed JPEGs is less noticeable if the
image has low level of contrast, or is artificially faded or
blurred.
According to David Siegel,
one of the characteristics of the third
generation web sites is exact pixel-level positioning of material
on the page. Non-tiling backgrounds can help you achieve relative
positioning of background and foreground layers, although, unfortunately,
not with pixel precision. The problem is that, while the background
image reaches the frame of the browser window, the material on the page's
foreground layer is always shifted off the edge by some margin.
The worst part is that the size of this margin is not constant, but depends
on which browser you use and what base font size you've selected.
This different-width margin makes it impossible to exactly
position a foreground image over some fixed point in the
background. This positioning may be sufficiently precise for a
partially transparent foreground image whose anti-aliasing "halo"
corresponds to the changing colors of background. But, if
some of your elements require pixel-to-pixel matching with the
background contents, you cannot count on them always taking the same
position relative to the background.
There's a workaround, however. On a framed site, you can
specify MARGINWIDTH and MARGINHEIGHT values for a frame, thus
ensuring exact margin sizes and, therefore, exact positioning of the
frame's contents relative to its border and the background. On
some sites, frames are only used for the sake of this side
effect---an entire page is encapsulated into a FRAMESET with a
single FRAME so that the designer can exactly set its margins.
It's up to you, of course, to decide whether the resulting cosmetic
improvement is worth the damage to the accessibility of your page.
By the way, frames can be useful in overcoming another limitation
of non-tiling backgrounds: since the background image is tied to
the top left corner of the browser window, the page's foreground
must be flushed to the left as well. Centering the page's
bounding box within the window, to make it look better with
different window sizes, could be achieved by enclosing the page
along with its background into a fixed-width frame, surrounded by
two empty frames on both sides with their width specified as "*"
(which means "take all remaining space"). The "rubber" width
of side frames will ensure centered position of the middle frame
which may, in turn, include a nested frameset. (A more correct,
CSS-based approach to centering both the background and the
foreground of a box is not feasible since, unfortunately, both
Netscape and Microsoft CSS-enabled browsers only partially
implement the use of the background property for
specifying an image URL.)
A couple of words must be said about the pixel size and color
depth of background images. Joe Gillespie reports that,
even if your pattern is several pixels wide, the image to be tiled
should be at least 64x32 pixels, or the screen refresh on slower
machines will be hampered down significantly. On the other hand,
large non-tiling JPEG images, while taking a couple dozens Kb in
compressed form, may require up to several Mb of memory when
decompressed, also resulting in a delay on slower machines.
Finally, you may have hit pages where the background stays fixed
relative to the browser window, even while the foreground text and
graphics are being scrolled up and down. This trick was introduced
by Internet Explorer, Netscape doesn't support it and it's not in
the official HTML 4.0 specification. If using IE-only features is
worthwhile in your case, then you can prevent your background image
from scrolling by adding the following attribute to your
BODY tag:
BGPROPERTIES="FIXED"
|
|
