The World of Texture. Background issues
| Background issues |
|
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" |
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.
Revised: May 03, 2005
URL: https://www.webreference.com/dlab/9712/background.html
Find a programming school near you