Why It s Bulletproof

Why It's Bulletproof

By taking the extra time (and we're talking seconds here) to provide equivalent background colors for any images used as backgrounds, you'll make your site one step closer to being bulletproof. Users who visit your pages with images turned off to conserve bandwidth will still be able to read them. Users who have slow connections will see the text and background color load first and be able to read the page before any images load.

Bulletproof means being prepared for whatever is thrown at your design. This is just one small, easy step that can help ensure your design doesn't break down when viewed without images.

To illustrate a similar example, let's look at the sidebar headings found on SimpleBits (Figure 6.7).

Figure 6.7. On simplebits.com, "About Sections" and "Bits to Buy" are contained in <h3> elements.

The "About Sections" and "Bits to Buy" headings are contained in <h3> elements (i.e., <h3>About Sections</h3>), while a subtle background fade image is placed behind the white text.

The CSS to achieve this for the top (green) heading looks like this:

 #sidebar h3 {   margin: 30px 0 12px 0;   padding: 5px 10px;   color: #fff;   font-size: 120%;   background: url(../img/sub-h-bg.gif) repeat-x top left;   } 

Where sub-h-bg.gif provides the green fade background, the text on top of it is white. The page's default background color is also white. I think you can see where I'm going with this.

If we were to turn off images, the headings would completely disappear (Figure 6.8).

Figure 6.8. The magically disappearing heading text!

White text on top of a white background equals magically disappearing content.

Fortunately, the simple fix that we learned earlier in the chapter applies here as well. By choosing a similar background color equivalent and declaring that along with the image, we'll achieve bulletproofness:

 #sidebar h3 {   margin: 30px 0 12px 0;   padding: 5px 10px;   color: #fff;   font-size: 120%;   background: #538620 url(../img/sub-h-bg.gif) repeat-x top left;   } 

In the above CSS, we're declaring a shade of green that's found in the background fade image along with the image itselfin one single rule. Because background images always sit on top of background colors, we have a safe backup in case the image is unavailable, turned off by the user, or loading slowly.

Additionally, if the user increases the text size of the page, the background image will stay aligned to the top of the box, while the background color will extend down as far as it needs to (Figure 6.9). This also ensures the white text of the heading will be readable, always sitting above the green background.

Figure 6.9. A 3D view of the stacking order showing the white text and tiled gradient image sitting on top of the solid green background.

Figure 6.10 shows the headings with images turned off, but this time, their background color equivalents make the white text readable once again.

Figure 6.10. With green and orange background colors specified, the headings become readable, even in the absence of images.

Now that we've handled the absence of images, let's see what happens in the absence of CSS.