Add rant about background image

1 files changed, 55 insertions, 0 deletions

diff --git a/content/posts/2021-09-21-background-image.md b/content/posts/2021-09-21-background-image.md
new file mode 100644
index 0000000..96c331e
--- /dev/null
+++ b/content/posts/2021-09-21-background-image.md
@@ -0,0 +1,55 @@
+---
+title: "[Web Horror] Background Image"
+date: 2021-09-20T21:39:29+07:00
+lang: en
+categories: [ blog, "web horror" ]
+tags: [css, background, imagej]
+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.