CAMBIAR LA IMAGEN DEL HEADER DE ESTA PLANTILLA

11.23.2007

Hoy intentaremos cambiar la imagen del header de la plantilla que uso. Si no sabes donde descargarla, te dejo el enlace de Blog And Web para que la encuentres.




El primer paso será buscar esta parte del código de la plantilla.

/*-- (Cabecera) --*/

#header-wrapper {
background: #000 url(http://4.bp.blogspot.com/_Zuzii37VUO4/RrlxrqYSVGI/AAAAAAAACAk/kA7e4MVAwWY/s1600/head-bg.gif) repeat-x;
height: 126px;
position: relative;
color: #D16683;

La parte en rojo es la dirección donde está alojada la imagen, que es esta:



La razón por la que ocupa todo el ancho del header es el código "repeat-x;" que indica que esta imagen debe repetirse horizontalmente.

Para reemplazarla tenemos dos opciones:

La primera: reemplazarla por una imagen similar a ésta, la cual debe tener las mismas medidas: 59 x 126. Para diseñarla recomiendo StripeGenerator.

La segunda: buscar una imagen que tenga las dimensiones del header, es decir, 1003 px de largo por 126 px de altura o ancho.

Para el primer caso usaré esta imagen:




Alojo la imagen en un servidor (imageshack), reemplazo la url de la imagen, y el resultado es este:




Demo

En el segundo caso usaremos la siguiente imagen:




Reemplazo la url de la imagen, borro "repeat-x;" y en su lugar debe decir: "no-repeat;"

/*-- (Cabecera) --*/

#header-wrapper {
background: #000 url(http://4.bp.blogspot.com/_Zuzii37VUO4/RrlxrqYSVGI/AAAAAAAACAk/kA7e4MVAwWY/s1600/head-bg.gif)repeat-x;
height: 126px;
position: relative;
color: #D16683;

Debe quedar así:

/*-- (Cabecera) --*/

#header-wrapper {
background: #000 url(http://4.bp.blogspot.com/_Zuzii37VUO4/RrlxrqYSVGI/AAAAAAAACAk/kA7e4MVAwWY/s1600/head-bg.gif)no-repeat;
height: 126px;
position: relative;
color: #D16683;

Y el resultado final es este:




Demo

3 comentarios:

Anónimo dijo...

Que robo!!! estas plantillas son de blogandweb y tu llegas y le cambias el enlace quedandote con el credito que no te corresponde?
Que sin verguenza!

м@т!'$™ dijo...

Mucho cambio mucho cambio pero al final de la página no has cambiado los créditos como corresponde. Si te fijás, donde dice "justskins", hay un link a tu blog (como está predeterminado) y no a justskins.com como es debido.

l3utterfish dijo...

Hola..

No se me ve el HEADER de mi plantilla en Inernet explorer cuando abro mi blog l3utterfish

En Firefox si se ve.

Cual puede ser el problema??