Cita:
Iniciado por webosiris 
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.
En realidad mi intención no es imitar esa plantilla, simplemente quise mostrar esa plantilla para que vean lo que yo quería lograr que era exactamente lo que expusieron los dos compañeros mas arriba en sus respuesta. de todas maneras se te agradece la ayuda
Webosiris. locoxchacho
Lo que noi logro entender es ¿por que si el id cabecera ocupa el 100% lo centra? tengo entendido que si el contenedor ocupa el 100% este no lo centra.