Tutorial: Como colocar dois backgrounds

Vi esse tutorial no CherryBomb, mas tem um detalhe que a autora não citou lá e que é muito importante mesmo, talvez ela tenha achado isso muito óbvio, mas sei lá, eu achei importante :). Então, antes de mais nada, quero mostrar o que é exatamente dois backgrounds e é isso aqui:

O 1º background é a partir dessa linha rosa para cima e o 2º background é o background florido, um efeito bem fofo, certo? :) E útil, pois da para dar um contrate vintage com moderno. Enfim, vamos ao passo-a-passo!

1) Procure por: body { você encontrar algo assim:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}

2) Apague tudo e coloque este código no lugar:

body, html {
height: 300px;
}
body {
font: $(body.font);
color: $(body.text.color);
background: url("BACKGROUND 1") repeat; }
html {
background: url("BACKGROUND 2") repeat; }

o valor em vermelho é a altura do primeiro background, caso a altura do seu background seja diferente, mude o número.

 3) O primeiro background você terá que editar parecido com esses exemplos aqui:

 OU 

Porque, vou tentar explicar.

4) O background 2 pode ser qualquer um da sua escolha, exemplos:

 OU 

Esse tutorial já é um pouco mais complicadinho, mas no final, vale a pena porque fica muito bom! Abçs!

Créditos: Embora eu tenha visto o tutorial no site do CherryBomb (cherry-liah.blogspot.com.br), eu que expliquei sozinha, mas os goodies utilizados neste posts foram retirados do tutorial de lá :).