O leitor Marco lançou um desafio, utilizar a técnica de dois backgrounds de uma forma um pouco diferente, ao invés de um background p repetir em X e Y, e outro p repetir somente em x, ele quer dois backgrounds na vertical, sendo que ele testou da seguinte forma no css:

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
html {
  background: transparent url(images/bg_02.gif) repeat-y 0 0;
}
body {
  background: transparent url(images/bg_01.gif) repeat-y right 0;
}

E as palavras dele sobre o código:

Ao deslizar a barra de rolagem, observe que o background da tag body não segue até o final, pois este possui [height:100%], ou seja, 100% da área visível do browser. E se colocar [height:auto], o background segue o tamanho do conteúdo inserido no documento, ou seja, se não houver conteúdo, não haverá background na tag body.”

Então quando temos um conteúdo maior do que a área util do browser, o bg do body não continua repetindo, segundo ele um pequeno bug no Firefox (não tenho uma opinião sobre ser ou não um bug do Firefox, pois eu tenho um pensamento um pouco radical, se ta diferente no IEca e no Firefox o IEca ta errado.) testei no Opera e aconteceu a mesma coisa que no Firefox, e que ao colocar height: auto, até funciona, mas caso nao tenha conteúdo o bg não aparece.

Eis que entra um pequeno truque, que fez funcionar no Firefox e no Opera, no IE já estava “funcionando”, então é só colocar um height: auto !important; e um min-height: 100%; no body, mas para não ter dúvidas colocamos no html também, mas só no body já resolve o problema…

[UPDATE]
O leitor percebeu uma falha minha, por pura preguiça minha, e talvez um pouco de organização demais, coloquei o height:auto !important; min-height: 100%; no html e no body, o que faz voltarmos ao erro de nao exibir o bg caso nao tenha conteudo.. Obrigado Marco ou Allan…
[/UPDATE]

html, body {
  height:auto !important;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}
html {
  background: transparent url(images/bg_02.gif) repeat-y 0 0;
}
body {
  height:auto !important;
  min-height: 100%;
  background: transparent url(images/bg_01.gif) repeat-y right 0;
}

O height: auto !important é para os browsers que nao reconhecem o min-height, o IEca não precisa pois ele ignora sumariamente que tenha uma altura fixa, que não é este o caso, o min-height é para os browsers que interpretam e vão forçar para que eles tenham uma altura minima, no nosso caso 100%.

O exemplo funcionando pode ser visto aqui.

Então ai está, missão dada, é missão cumprida. Se aparecerem outras dúvidas mandem, quem sabe a sua dúvida não vira um ‘desafio do leitor‘.