Oli Warner About Contact Subscribe

Gripe 802: Background Images

Monday, 12 February 2007 accessibility rant webdev

When making a design these days, people are far too keen to plaster background images around without wondering what happens if the site cannot load the image for some reason.

This is not normal behaviour but when did anything work as you wanted it 100% of the time? Some common reasons for images not loading are:

Whichever happens to you, you should be prepared. A design should work without the images. Fortunately fixing a site that doesn’t work without images is quite easy.

Specifying background colours will fix most layout issues. Take this example from Not Too Geeky. The top half shows the normal display and the bottom half shows the design with images disabled (and the text highlighted so you can see it!).

Bad backgrounds.

I’m not picking Tyme so much because this is such a prevalent problem but if she set a background colour to both those sections which were approximate to that of the image, people would be able to read them without needing to highlight the text.

Setting alt tags to images will work best for places where you have an image that means something. Eg if you have a picture of you on holiday eating a melon, set the alt to “Me eating melon on holiday”. That way when the image doesn’t load, people will still be able to see the alt text.

I know I’m not perfect. If you disable images on this site, you’ll notice that there’s no meaningful alternative text for the logo and there are some place that would really benefit from a good background.