Skip to main content
Huy's site

[Web Horror] Background Image

CSS allows you to set background for an element with an image with background-image attribute. However, as recommended by Mozilla, you should always set a background-color, because:

If the images cannot be loaded—for instance, when the network is down—the background color will be used as a fallback.

You can encounter some of websites that don’t follow this:

The cookie popup dialog on tchncs.de has an image of (literal) cookies as background, and this is what it looks like when the images can’t load:

An unreadable popup dialog on tchncs.de due to bad backgroundcontrast

FSFE makes the same mistake on their website for Public money? Public Code!

An invisible open letter due to no contrast

I was with a terrible internet at the time I visited it, and I didn’t realize the text was loaded until I double clicked on it.

Thanks to caching, this problem wouldn’t be too significant if you revisit the website often, but setting a fallback color is still a recommended practice.

I would even say one should avoid direct background on text if possible. Even when the image is fully loaded, the text can be hard to read on similar colored background.

Blue link that is hard to read on bluish background

Images that are without simple pattern should be avoided at all cost: it is practically impossible to choose a color to contrast all of them. The image below, taken from publiccode.eu, is an example.

Text on images with too many details is hard to read


This is not to shit on the mentioned websites. FSFE fights for software freedom and tchncs.de hosts various services for free, which is why I care. These websites however serve as bad examples in term of readability with such backgrounds.


Would you like to discuss this post? Email me!

Fediring

Look at my fedi fellows' sites:
  1. Previous site
  2. What is Fediring?
  3. Next site

Articles from blogs I read

A Hare code generator for finding ioctl numbers

Modern Unix derivatives have this really bad idea called ioctl. It’s a function which performs arbit…

via Drew DeVault's blog May 14, 2022

Phone-tracking companies tracking military and intelligence personnel

Two US phone-tracking companies showed they could track military and intelligence personnel of …

via Richard Stallman's Political Notes May 13, 2022

GCC 12 Becoming Default Compiler in Tumbleweed

More than a month after preparing the default compiler for openSUSE Tumbleweed to be switched to GN…

via openSUSE News May 13, 2022
Generated by openring