A Common Approach | Bulletproof Web Design(c) Improving flexibility and protecting against worst-case scenarios with XHTML and CSS

Several months ago, I received an e-mail from a faithful reader of my business site and weblog, SimpleBits. In the e-mail, the reader explained that while he enjoyed reading the site, he often browses the Web with images turned off, further explaining that he connects to the Internet via a slow dial-up connection and likes to read content rather than waiting for graphics to load. He's not aloneto speed up an otherwise sluggish experience, many users disable images in their browsers, allowing pages to load content and background colors only (Figure 6.1).

Figure 6.1. Unchecking the Load Images box in the Firefox browser disables all images.

We'll get back to why the reader was explaining the reason he browses this way in just a minute, but first, it'll be helpful to explain how a tiled image was used on SimpleBits that sat behind all of the site's content.

It's a common approach, especially when utilizing CSS and the background and/or background-image properties. An image is used behind text to add color, patterns, and so forth. At the time, the columns and decorative border on SimpleBits were achieved by using a repeating background image on the entire page. A single image controlled the side stripes, the white content area, and the light-gray sidebar (Figure 6.2).

Figure 6.2. The bg.gif image was tiled vertically on top of dark gray to create the columned background of the site.

This single image was tiled vertically from top to bottom, creating the columns and side borders that sat on top of a dark-gray background assigned to the <body> element (Figure 6.3).

Figure 6.3. When bg.gif was tiled, it created the white and gray columns that sat behind the page's text content.

So, by declaring a dark gray for the background on the <body>, I was essentially setting a default background color for the entire page, unless overridden on any inner element.

 body {   background: #666;   }

The tiled image was assigned to an inner <div> that contained all of the pages' content; therefore, it would lay on top of the gray background behind it, creating the white and gray columns for text. This all works rather nicely. By layering a tiled image on top of a background color, we're creating space for text to be easily read when placed over the tiled image (Figure 6.4).

Figure 6.4. The dark gray text sits on top of the tiled image.

The problem is when the image isn't there and the site's unbulletproofness (perhaps a new word that I've invented) is exposed.