From ee738aaaf431b31933fc9eec3015e0b44b220aa2 Mon Sep 17 00:00:00 2001 From: Ngô Ngọc Đức Huy Date: Tue, 21 Sep 2021 20:15:59 +0700 Subject: Add rant about background image --- content/posts/2021-09-21-background-image.md | 55 ++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 content/posts/2021-09-21-background-image.md (limited to 'content/posts') 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) + +FSFE makes the same +mistake on their website for Public money? Public Code! + +![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. -- cgit 1.4.1