de hecho hay una forma más sencilla de hacer lo que queres: usando los elementos HTML y BODY, que también son elementos con los que podemos jugar.
Cortas una imagen de 1px de ancho por 200 de alto (o lo que sea) con el color de arriba, y lo mismo con el color de abajo. Despues
Código:
html{background:url(img/colorabajo.jpg) repeat-x bottom left #fff}
body{background:url(img/colorarriba.jpg) repeat-x top left}
De esa forma simulas los 3 colores sin necesidad de sacar divs del contenedor... porque si se dieron cuenta, por lo menos en el template de ejemplo, los contenidos del header y del footer tienen el mismo ancho que el contenido central.