A fallback is what users get when an image fails to load or an image-based effect does not work in their browser. The goal is to let the page fail gracefully rather than leave content unreadable or a design awkwardly unfinished. section 4.0
For an image that conveys information, write useful `alt` text: a browser can display it when the image is broken, and assistive technology can use it to describe the image. If the image is purely decorative, hiding it may be preferable to showing a broken-image icon. CSS cannot detect a broken image, so an `onerror` handler can hide it: `<img src="./image.jpg" alt="" onerror="this.style.display='none'">`. The handler runs only if the image fails to load; do not use this hiding approach for an image whose content users need. section 4.3.2
CSS can provide a visible alternative when an image or effect is unavailable:
- Put a background color behind a background image. It shows while the image loads or if loading fails, and remains visible through transparent parts of the image. section 9.3.1
- For text filled with a background image, retain a readable `color` value alongside the prefixed `text-fill-color` and `background-clip` declarations. The color remains useful if the image or experimental effect fails. section 5.3.2
A card background with a fallback color
`.card-item__side { background: url("bg.jpeg") left top / cover blue; }` puts the image over blue. If the image fails, the card still has a background distinct from the page. section 9.3.1
