Esta semana desenvolvendo um projeto, me deparei com o seguinte problema, dois backgrounds em direções diferentes um horizontal no alto da tela e outro vertical.

A primeira coisa que pensei foi que teria que colocar uma div com 100% de altura e largura para poder colocar esses dois backgrounds, para eu não ter que fazer uma imagem gigantesca. Só que foi não querendo colocar uma div para fazer o papel de um “segundo body”, que tive uma brilhante idéia, vou colocar uma das imagens na tag html e a outra no body.

html, body {
   margin: 0;
   padding: 0;
 }
html {
   background: #0ff url(images/bg_02.gif) repeat 0 63px;
}
body {
   background: transparent url(images/bg_01.gif) repeat-x 0 0;
}

As imagens:
exemplo de solução de problema
exemplo de solução de problema

Só que ai veio o problema a unica imagem que aparecia era a que estava na tag html, que estranhamente assim que se retirava o css da tag html aparece o bg da tag body.

Foi ai que percebi, na minha opinião, um bug de renderização/interpretação do css, e logo vi que tinha que achar um jeito para resolver isso, foi em minha terceira tentativa que tive sucesso no que queria fazer, coloquei as tags html e body com height: 100%, e assim resolvi o problema.

html, body {
   height: 100%;
   margin: 0;
   padding: 0;
 }
html {
   background: #0ff url(images/bg_02.gif) repeat 0 63px;
}
body {
   background: transparent url(images/bg_01.gif) repeat-x 0 0;
}

As outras duas tentativas sem sucesso foram colocar o height: 100% só no body e depois só no html. Caso queira ver o problema resolvido, veja aqui um exemplo funcionando.