Which could lead to text that’s there, but invisible.
You’d never do that on purpose of course! The trouble is it can sneak up on you. For one thing, the default background-color is transparent, so without setting any background the background of an element is probably white.
More commonly, you’re using a background-image that makes the background a different color, and you’re setting white text on top of that.
The black background color will ensure the white text will be visible while the image loads (or if it never loads at all!). Getting slightly fancier, we could use a color used in the image. I like a little app called Frank DeLoupe for helping me pluck a color from anywhere on my screen. Then I’ll use that color as the fallback color using the shorthand syntax for backgrounds:
This kind of thing takes very little effort, improves your design’s resiliency and UX, and I think you’ll find becomes are part of your CSS muscle memory the more you write CSS.
Another related topic here, since we’re working with a photograph, is the idea of a “Progressive JPG.” Photoshop has the ability to save a JPG in this format. This changes how the displays as it’s coming across the network. Here’s a comparison video:
Perhaps a more desirable loading experience, but not a replacement for a fallback color.
Images are one of the heaviest parts of websites, and loading techniques for them are a big topic in web performance. Here are some more related to things to think about: