use a cor de fundo até que a imagem de fundo seja carregada - html, css

Eu tenho uma imagem de fundo para uma div.

Preciso que o plano de fundo tenha uma cor diferente da branca até que a imagem de plano de fundo seja carregada.

Não consigo usar uma cor de plano de fundo em um div do recipiente, pois minha imagem de fundo tem transparência e desejo ver o conteúdo da página abaixo.

Existe uma maneira de ter uma cor de fundo quecarrega instantaneamente e, em seguida, quando a imagem de fundo é carregada, use isso? Eu sei que poderia fazê-lo com JS, mas há algum método de fallback que eu possa usar com apenas css / html?

Respostas:

Se você é absolutamente contra o Javascript por qualquer motivo, você pode criar um efeito que imita o que você obteria com o Javascript.

http://jsfiddle.net/8Qk5K/5/

div {
background : url(http://www.st.hirosaki-u.ac.jp/~shimpei/GPS/GPSCMC/images/sphere-transparent.png);
width:500px;
height:500px;
position:relative;
}

.container:before{
width:500px;
height:500px;
position:absolute;
left:0;
top:0;
content:"";
background:#333;
-webkit-animation: fade-out 99999s 1 linear; /* Safari 4+ */
-moz-animation:    fade-out 99999s 1 linear; /* Fx 5+ */
-o-animation:      fade-out 99999s 1 linear; /* Opera 12+ */
animation:         fade-out 99999s 1 linear; /* IE 10+ */
}

@-webkit-keyframes fade-out {
0%   { opacity: 1; }
0.002% { opacity: 0; }
100% { opacity: 0; }
}
@-moz-keyframes fade-out {
0%   { opacity: 1; }
0.002% { opacity: 0; }
100% { opacity: 0; }
}
@-o-keyframes fade-out {
0%   { opacity: 1; }
0.002% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes fade-out {
0%   { opacity: 1; }
0.002% { opacity: 0; }
100% { opacity: 0; }
}

O que isto faz é:

• adicione um elemento de bloco acima da sua imagem, com o fundo desejado.
• desvanece esse fundo depois de pouco tempo (você tem que encontrar a quantidade certa que funciona para o seu conteúdo).
• mantenha o fundo desbotado com tempo infinito.

O lado negativo disso, como você provavelmente notou, é que você não pode prever o tempo exato. Para alguns, a imagem seria carregada, para outros, ainda pode haver um pouco até que seja carregada.

Você também pode ajustar o tempo de desvanecimento, dependendo do navegador. Se alguém acessar o site com o IE8, por exemplo, você poderá adicionar um tempo de fade-out maior.

Também um delay pode ser adicionado à animação, só para iniciá-lo depois de algum tempo.

Você pode simplesmente empilhar as duas regras CSS.

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

A cor de fundo será exibida até que a imagem seja carregada.