use background-color until background-image is loaded

Question

I have a background image for a div.

I need the background to be a different colour other than white until the background image is loaded.

I can not use a background color on a container div, as my background image has transparency and I want to see page content underneath.

is there a way to have a background color which loads instantly, and then when the background image is loaded use that? I know I could do it with JS but is there any fallback method I can use with just css/ html?

Answer 1

You can simply stack the two CSS rules.

background-color: #000;
background-image: url("...");

The background color will display until the image is loaded.