Don't forget the background colour

It is not uncommon for a web developer to assume that everything is going to work, and thus not code for the possibility that something will fail. A lot has been said about writing JavaScript to progressively enhance pages, and there has been rather a lot that covers content images but I am going to talk about background images.

There are a number of things that can stop a background image from loading, including images being disabled (useful if you connect to the Internet with a slow GPRS or dial-up connection) and simple network lag delaying the loading of the image (which might show up eventually, but until then it can cause problems).

So what happens when the background image doesn't load (or hasn't loaded yet)? The user gets the background colour specified for the element instead. This means it is important to select a good background colour.

What negative consequences can this have? For this we turn to Sourceforge, who produced the page that motivated me to produce this rant.

The problem here isn't technically a background image, it is a foreground image generated using the proposed canvas element from HTML5 and positioned behind content as if it were a background image. The same principles apply though.

Due to network lag, it took a while for the page to load on my system. This delayed the loading of the image (because it was generated when the onload event fired) for a couple of minutes (a not insignificant amount of time).

If you examine the image of the page you can see that under the logo there is a large portion of white space. This white space is very important as you will see if you compare it to the image of the page once it is loaded.

After loading, the white space has been filled by a bright orange gradient background. On this can be read the most important text on the page - including the link to the file the user is trying to download.

Since the page was not designed to allow it to function without the background image being present, if the image fails to load the user is presented with white text on a white background, and it isn't obvious that there is supposed to be text there at all.

So, onto conclusions: When testing your page, test with images disabled and make sure that all the content is still readable.