diff options
| -rw-r--r-- | content/posts/2021-09-21-background-image.md | 55 | ||||
| -rw-r--r-- | static/images/bg-img-bad-contrast.png | bin | 0 -> 297241 bytes | |||
| -rw-r--r-- | static/images/bg-img-crowded.png | bin | 0 -> 377163 bytes | |||
| -rw-r--r-- | static/images/bg-img-publiccode.png | bin | 0 -> 40951 bytes | |||
| -rw-r--r-- | static/images/bg-img-tchncs.png | bin | 0 -> 32904 bytes |
5 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: + + + +<abbr title="Free Software Foundation Europe">FSFE</abbr> makes the same +mistake on their website for <i>Public money? Public Code!</i> + + + +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. + + + +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. + + + +----- + +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. diff --git a/static/images/bg-img-bad-contrast.png b/static/images/bg-img-bad-contrast.png new file mode 100644 index 0000000..f3b2e11 --- /dev/null +++ b/static/images/bg-img-bad-contrast.png Binary files differdiff --git a/static/images/bg-img-crowded.png b/static/images/bg-img-crowded.png new file mode 100644 index 0000000..901c401 --- /dev/null +++ b/static/images/bg-img-crowded.png Binary files differdiff --git a/static/images/bg-img-publiccode.png b/static/images/bg-img-publiccode.png new file mode 100644 index 0000000..9980696 --- /dev/null +++ b/static/images/bg-img-publiccode.png Binary files differdiff --git a/static/images/bg-img-tchncs.png b/static/images/bg-img-tchncs.png new file mode 100644 index 0000000..bfb2bda --- /dev/null +++ b/static/images/bg-img-tchncs.png Binary files differ |
