Una imagen en la cabecera del blog

Hace unos días, un tweet de mi amiga Un!k me hizo ofrecerle mi ayuda para con su blog. El problema estaba en que no podía colocar una imagen en su blog bien ubicado.

Vía msn me cuenta que tenía como guía una entrada de Rosa sobre el tema, pero no pudo seguir el consejo al pie de la letra, puesto que faltaba un dato para lograrlo. Lo que Rosa propone es colocar manualmente mediante código CSS una imagen en la cabecera o header del blog, también aconsejando jugar con valores para redimensionarlo. El código que tenemos como base en el CSS es este:


#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Rosa propone el siguiente cambio(cita):

Añades la url tu la imagen para que aparezca como fondo, dentro del bloque “header”, si quieres eliminar los bordes,borra la línea “border”: border:1px solid $bordercolor;Si tu imagen mide 660px de ancho perfecto, sino puedes establecer otro ancho, si lo que quieres cambiar es la altura puedes añadir el valor height, especificando la altura que quieres. Yo hice mi propia imagen, así que le di el tamaño de la cabecera de plantilla.
Quedaría así:


#header-wrapper {
width:660px;
margin:0 auto 10px;
}
#header {
margin: 5px;height:100px;
background-image: url(http://URL DE TU IMAGEN);
text-align: center;
color:$pagetitlecolor;
}

Como verán, se agrega la imagen, quedando centrada. Un!k lo hizo de esta forma, pero la imagen no quedaba justo donde élla quería, entonces yo le corregí el error(en realidad lo hice personalmente, pero eso es otra historia), trabajando directamente en la imagen.

¡Claro! Una vez ubicada una imagen, o cualquier otro elemento dentro de un bloque DIV, dicho elemento adquiere una etiqueta en la cual se puede trabajar, y en blogger, dicha etiqueta viene en el CSS para ser trabajada, y es ésta:


#header img {
margin-left:auto;
margin-right:auto;
}

Y el cambio que le hice a Un!k fué éste:


#header img {
background:#FFF;
margin:0 -100px 0 4px;
padding:0 217px 0 0;
width:400px;
height:105px;
}

Explicación: Los cambios que hice fueron darle un fondo blanco al bloque de la imagen (img) con background; mover la imagen hacia la derecha con margin (margen); darle un relleno hacia la derecha, para tapar la imagen del fondo mismo del header con padding (relleno); y por ultimo redimensionar la imagen con width (ancho) y height (altura). Los valores de margin y padding son arriba, derecha, abajo, izquierda, y cabe destacar que SÓLO margin puede tener valores negativos.