InformIT: Sams Teach Yourself HTML 4 in 24 Hours > The Old Background Banner Trick

The Old Background Banner Trick

One of the most prominent tricks employed in Figure 13.3 is the use of a 1,000-pixel-high background image (named wainscot.gif). Because the entire page is unlikely to be more than 1,000 pixels high, the background only appears to repeat in the horizontal direction. Since the bottom part of the image is all the same color, it looks like the background is only a banner at the top of the page.

Unlike a foreground image used as a banner, however, this wainscoting will automatically size itself to go from "wall to wall" of any sized window. It takes up less space on a disk and transfers over the Internet faster because only one repetition of the pattern needs to be stored.

If you use this trick to make background banners on your own Web pages, you should make them at least 2,000 pixels high. The page shown in Figure 13.3 can actually become longer than 1,000 pixels when someone uses a very large font size, in which case the wainscoting shows up again at the very bottom or middle of the page.

By using a very wide background that repeats vertically, you can easily make a repeating banner that runs down the left side of a page, too. If you don't want text to obscure the banner, put a very large, totally transparent image at the beginning of the HTML page with <img align="left" />.

Figures 13.4 through 13.6 show the HTML and graphics that implement a left-side banner, as well as the resulting Web page.

Note that I right-justified the other graphics, both for aesthetic reasons and so that I could avoid using <br clear="left" />, which would skip all the way to the bottom of the left-justified banner graphic.

TIP

If you use a left-aligned transparent banner, be sure to add enough blank space around the actual foreground image to fill the area on the page you want to cover. The "Varieties of Proboscis" title graphic in Figures 13.5 and 13.6, for example, is 170x1,200 pixels.

Figure 13.5 The rotated graphics for a left-side banner. (Notice how I changed the direction of the light source and shadowing, too.)

Figure 13.6 The HTML from Figure 13.4 and the banner from Figure 13.5 appear like this in Microsoft Internet Explorer.

Because almost nobody views Web pages in a window larger than 1600x1,200 pixels, vertically tiled background banners can safely be 2,000 pixels wide.

Figure 13.4 With a few strategic changes, you could put the top banner in Figure 13.3 to the left side.

Note

You'll sometimes choose to push the limits of HTML layout. The home page of the 24-Hour HTML Café (http://24hourHTMLcafe.com) does exactly that—combining several tricks from this and other hours into a flexible layout that adjusts itself to the size of the browser window gracefully.

If you view the page in a small enough window (fewer than about 600 pixels wide), you'll notice that the images start crawling all over each other in ways God obviously never intended them to try. I could have solved this problem with tables (see Hour 15) or other advanced tricks, but I went for simplicity at the risk of annoying the very few people who look at the Web through extremely small windows.

Specifying Image Width and Height | Next Section

Previous Section