Header con "ancho total"

Desde que modifiqué el aspecto del header del Escaparate, son muchos los que me preguntan como hacer que la cabecera del blog ocupe todo el ancho de la pantalla, tal como está en mi blog.
En realidad es un "efecto óptico" ya que el tamaño de la cabecera es de unos 800 pixeles.Lo que hace que parezca que ocupa todo el ancho de la pantalla, es una imagen aplicada en el fondo de la página.

Voy a tratar de explicar paso a paso los cambios necesarios para darle este aspecto al header, tal como yo misma los fui haciendo, con la única intención de que os sirva de orientación para vuestros propios "experimentos".

[1] Antes de empezar os aconsejo crear un blog de pruebas con la plantilla Mínima de Blogger, entre otras cosas porque es la que voy a usar en este ejemplo.

[2] Vamos ahora a ocultar la Navbar de Blogger.


[3] Preparamos la imagen para añadir en el fondo del blog, lo que tampoco tiene porque ser algo complicado para los que no dominamos el diseño de imágenes. En mi caso la he hecho usando simplemente el Paint, que como sabéis viene incluido en Windows. Está en formato JPEG y tiene unas dimensiones de 39 x 245 pixeles.
Le he puesto un color distinto en la parte de arriba, para que destaque el menú que incluiremos más tarde, del resto de la cabecera.


[4] Subimos la imagen a un alojamiento apropiado o mejor aún la alojamos en el mismo Blogger para obtener su url.


[5] Vamos en nuestro panel a la parte de Edición HTML y localizamos esta sección del código de la plantilla:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Incluimos la url de la imagen en la línea del background de esta manera:

body {
background:$bgcolor url(http://img27.imageshack.us/img27/5118/dibujocewuio.jpg) repeat-x ;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

[6] Algo más abajo de esa parte de la plantilla, localizamos el #header-wrapper { y el #header {, en ambas partes de código veremos una línea como esta:
border: 1px solid $bordercolor;
tendremos que cambiar el valor 1px por 0px para anular el borde del header.

Guardamos cambios y tendremos entonces algo como esto:

[7] Vamos a colocar ahora la imagen en la cabecera desde la parte de Diseño de nuestro panel.
En mi caso he hecho una (tambien con el Paint) con el mismo color de fondo que la imagen que colocamos antes en el body (aunque no es imprescindible ya que esto dependerá del diseño de cada uno) para obtener así la apariencia de header con "ancho total". Está en formato JPEG y tiene unas dimensiones de 660 x 145 pixeles.

[8] Si en este punto miramos como está quedando nuestro diseño, comprobaremos que la nueva imagen de cabecera, no se ajusta del todo a la imagen de fondo:

[9] Volvemos a Edición HTML y localizamos de nuevo la sección del CSS que corresponde al header:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}

Y le hacemos algunos cambios para ajustar la cabecera:

#header-wrapper {
width:660px;
margin: 30px auto 0px;
padding-bottom: 25px;
border:0px solid $bordercolor;
}

Resultado:

[10] Por último vamos a incluir el código CSS necesario para el menú que irá sobre la cabecera y el buscador que estará incluido en él.
1-Copiamos y pegamos antes del ]]></b:skin> del código de la plantilla:

/* Menu Navbar---------------------*/
.pro15 {padding:0 0 0 10px; margin:0; list-style:none; height:30px; }
.pro15 li {float:left;}
.pro15 li a {display:block; float:left; height:30px; line-height:30px; color:#fff; text-decoration:none;font-family:arial, verdana, sans-serif; text-align:center; padding:0 0 0 10px; cursor:pointer; font-size:12px;font-weight: bold;}
.pro15 li a b {float:left; display:block; padding:0 15px 0 8px; color:#fff;}
.pro15 li a:hover {color: #fff; text-decoration: underline;}
.pro15 li a:hover b { color:#fff;text-decoration: underline;}
.pro15 li a em {display:block;float:left;width:15px; height:30px;}
/* Buscador ---------------- */
#search-btn {background: #008083;color: #ffffff;padding: 1px;margin: 0px 0px 0px 3px;
border: 2px solid #000;}
#search-box { width: 160px; border: 2px solid #196D81;padding: 1px;}

2- Localizamos ahora más abajo esta línea en el código de la plantilla:<div id='header-wrapper'>

Justo sobre esa línea, pegamos el código para mostrar el menú (es en este código donde tendremos que incluir los enlaces):

<ul class='pro15'>
<li><a href='#'><b>Inicio</b></a></li>
<li><a href='#'><b>Suscribe</b></a></li>
<li><a href='mailto:tucorreo@hotmail.es'><b>Contacto</b></a></li>
<li><a href='#'><b>Sobre mi</b></a></li>
<li><a href='#'><b>Archivos</b></a></li>
<li><form action='/search' id='searchthis' method='get' style='display: inline;'><input id='search-box' name='q' type='text'/><input id='search-btn' type='submit' value='Buscar'/></form></li>
</ul>

Resultado final:

Notas:

Como os dije al principio de la entrada, esto pretende ser solo una orientación para vuestros propios diseños.
He puesto las medidas de las imágenes que he usado porque en función de esas medidas es como he añadido los valores necesarios para "encajar" el header, si usáis otras medidas para las imágenes tened en cuenta que los valores de padding y margin en el header-wrapper también serán distintos.