Text Over Image

When displaying text on an image, you need to consider what the text will look like if the image fails to load.

Look at the example below:

美食

However, when the image fails to load, the text is almost invisible.

Delicious food

We can solve this problem by adding a background color to the <img> element. This background will only be visible if the image fails to load.

Food

Food