Background Images | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

In addition to setting background colors, you also can change the appearance of a Web page by setting a background image using the background attribute of the body element. The value of background should be the URL for a GIF or JPEG file, although in supporting browsers PNG files might also be acceptable. So you might use <body background="images/tile.gif"> to set the path to a background tile in your site's images directory. The URL is arbitrary; you may store the files wherever, and in fact, you can just as easily include a complete URL to access an image at another site, but this isn't suggested.

Background images will repeat, or tile, in the background of a Web page. This can make or break a Web page design. Imagine someone using the background attribute to place a 200 300 pixel JPEG of a favorite dog on his or her home page. The dog's image would repeat, both vertically and horizontally, in the background of the page. This would make the dog's owner very happy ”and make the page very difficult to read! Figure 6-6 shows an example of a bothersome repeating background.

Figure 6-6: Repeating background image

In general, it's a poor design decision to use complex background images. Taking the subtle approach can backfire as well. Some users attempt to create a light background such as a texture or watermark thinking that, like paper, it will create a classy effect. The problem with this is that under many monitors , the image might be difficult to make out at all, or the texture might even slightly blur the text on top of it. Just like setting background colors, the most important consideration is the degree of contrast. Always attempt to keep the foreground and background at a high level of contrast so that users can read the information. What good is an impressive layout if nobody can read it?

If you want a background, you can use image manipulation programs such as Photoshop to create seamless background tiles that are more pleasing to the eye and show no seam. Figure 6-7 illustrates a repeating background tile.

Figure 6-7: Background tiles without visible seam

Background images, or tiles, also can be used to create other effects. A single GIF image 5 pixels high and 1,600 pixels wide could be used to create a useful page layout. The first 200 horizontal pixels of the GIF could be color, and the rest could be white. Assuming 1,600 pixels as the maximum width of a browser, this tile would repeat only vertically, thus creating the illusion of a two-tone background. This usage has become very common on the Web. Many sites use the left-hand color for navigation buttons , while the remaining area is used for text, as shown in Figure 6-8. However, to guarantee that content appears on top of the appropriate section of the background image, you need to have precise control over text layout. This calls for tables or CSS.

Figure 6-8: Sidebar layout using background tile (horizontal GIF)

Be very careful when segmenting the screen using a background tile. For example, many people are tempted to create page layout with vertical sectioning, as shown in Figure 6-9.

Figure 6-9: Layout using background tile (vertical GIF)

However, there is a problem with this layout. Won't the colored bar repeat? Quite possibly, because the length of page content can be hard to determine. Viewers might find the bar repeating over and over with content being lost on top. A solution might be to make the background tile very tall. However, this not only increases file size , but also begs the question of how tall is enough? Because content can vary from page to page and increase or decrease over time, determining the width is next to impossible . It would appear that the same problem would occur with sidebar style tiles. This generally is not the case given that pages usually do not scroll left to right, and monitor resolutions rarely exceed 1,600 pixels. Of course, if they did you could make the image even wider. In either case, the problem of background tile repeats is solved with style sheets that provide the background-repeat property to set the direction and frequency of a tile's repeat pattern. This is discussed further in Chapter 10. There are a few other HTML-specific background features touched on briefly here.

Note

Another problem with background tiles is that some designers try to minimize file size and download time. For example, a designer can make the background images a single pixel tall; this might cause screen painting problems because the background will have to be tiled as many times as the screen is high in pixels. With a slow video card, this may produce an annoying sweeping effect. To avoid the background painting problem, consider balancing physical file size and download size. So a background image can be 5 or 10 pixels or even taller without really affecting download speed much, but improving painting speed significantly.

Internet Explorer Background Attributes

Internet Explorer supports a few special attributes for the body element that might solve background image and layout problems without resorting to style sheets. The bgproperties attribute offers a solution to the problem of scrolling background images. At present, however, it is supported only by Internet Explorer 3.0 and beyond. The attribute bgproperties="fixed' for the <body> tag will, under Internet Explorer, allow text and images to scroll while the background image accessed with the background attribute remains in place. Think of this as a watermark-like effect. It is possible to imitate this action in a cross-browser fashion using the CSS property background-attachment , as discussed in Chapter 10.

< Day Day Up >