Estou trabalhando com uma solução para manter as imagens na página inferior. O código que eu tenho atualmente é:

.footer {
    background-image: url('images/footer.png');
    background-repeat: repeat-x;
    position: absolute;
    height: 950px;
    width: 100%;
    z-index: -101;
    bottom: 0;
}

No entanto, isso tem problemas. O que eu estou buscando é um plano de fundo que fique no fundo e seja exibido atrás de todo o resto (daí o baixo índice z). Eu tenho o seguinte código para a parte superior (há um meio, isso é apenas a cor do bloco e foi adicionado ao corpo):

.background {
    position: absolute;
    top: 0;
    width: 100%;
    height: 600px;
    background-image: url('images/sky.png');
    background-position: center;
    background-repeat: repeat-x;
    z-index: -100;
}

Observe: a primeira parte não funciona (não está na parte inferior), mas a segunda parte funciona (está na parte superior
Se você deseja visitar o site, sinta-se à vontade para: www.duffydesigns.co.uk/brough (Por favor, não julgue, é um trabalho em andamento, nada está realmente terminado!
Obrigado pela ajuda
Joseph Duffy
ota: Como tenho certeza de que você pode descobrir, a parte superior é o céu, o fundo é grama e árvore