---
title: "[Web Horror] Background Image"
date: 2021-09-21
lang: en
categories: [ blog, rant ]
tags: [css, background, image, "web horror"]
translationKey: bg-img
---

CSS allows you to set background for an element with an image with
[background-image attribute][bg-img].  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.

[bg-img]: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

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 background
contrast](/images/bg-img-tchncs.png)

<abbr title="Free Software Foundation Europe">FSFE</abbr> makes the same
mistake on their website for <i>Public money? Public Code!</i>

![An invisible open letter due to no contrast](/images/bg-img-publiccode.png)

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/bg-img-bad-contrast.png)

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](/images/bg-img-crowded.png)

-----

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.