Text over image

When using the text over an imaging approach, it’s important to account for the case where the image fails to load. How the text will look like?

Here is an example.

The text looks readable, but when the image fails to load, it won’t.

We fix that easily by adding a background color to the <img> element. This background will only be visible if the image fails to load. Isn’t that cool?

.card__img {
    background-color: grey;
}