cambiar imagen de fondo de cabecera

yagami19 · #1 (**permalink**) 29/03/2012, 16:01

hola kiero insertar una banner asi en el fondo de la cabecera de mi blog

pero lo hize fue encontrar la imagen wrapper.png q viene por defecto en mi plantilla http://foroprowrestling.blogspot.com
y lo cambie por el banner, pero me keda asi

como ven no tiene la altura adecuada y repite

me podrian ayudar a colocarlo en mi blog y que quede bien

estos son los codigos: q cambiaria ?

Código HTML:

<style type='text/css'>
body{background: url(&quot;http://4.bp.blogspot.com/-TJ2tc6K9x30/TgBHsSz4tiI/AAAAAAAAARA/4H-WnXtWpoo/s1600/body.png&quot;) repeat scroll 0 0 transparent;color:#222;font:75% &quot;Helvetica Neue&quot;,Arial,Helvetica,sans-serif;margin:0px;padding:0px;}
a:link,a:visited{color:#3366CC;text-decoration:none;outline:none;}
a:hover{color:#5588AA;text-decoration:underline;outline:none;}
a img{border-width:0}
#body-wrapper{margin:0px;padding:0px;}
#body-wrapper2{margin:0px;padding:0px;}
#body-wrapper3{margin:0px;padding:0px;background: url(&quot;http://4.bp.blogspot.com/-OT2MAxE6lUA/TgBISEKFfSI/AAAAAAAAATQ/UTcyqUpKmYE/s1600/wrapper.png&quot;) repeat-x scroll 0 0 transparent;}
/* Header-----------------------------------------------*/
#header-wrapper{width:986px;margin:0px auto 0px;height:114px;margin-top:0px;overflow:hidden;}
#header-inner{background-position:center;margin-left:auto;margin-right:auto}
#header{margin:0;border:0 solid $bordercolor;color:$pagetitlecolor;float:left;width:43%;overflow:hidden;}
#header h1{margin:0 5px 0;padding:15px 0 0 0px;font-family:Arial, Helvetica, Sans-serif;font-weight:bold;font-size:41px;color:#000;text-shadow: 0 1px 0 #fff;}
#header .description{padding-left:5px;color:#000;font-size:12px;padding-top:0px;margin-top:0px;}
#header h1 a,#header h1 a:visited{color:#000;text-decoration:none}
#header h2{padding-left:15px;color:#000;font:12px Arial,Helvetica,Sans-serif}
#header2{float:right;width:53%;margin-right:0px;padding-right:0px;overflow:hidden;}
#header2 .widget{padding:22px 0px 0 0px;float:right}
.feedtwitter{margin-top:0px;padding-top:8px !important;text-align:left}
/* Outer-Wrapper----------------------------------------------- */
#outer-wrapper{width:986px;margin:0px auto 0px;padding:0;text-align:$startSide;font:$bodyfont;}
#content-wrapper{}
#main-wrapper{background:none repeat scroll 0 0 #FFF;border:1px solid #B2DEE5;border-radius:5px 5px 5px 5px;padding:10px;width:564px;float:left;word-wrap:break-word;overflow:hidden;}
#lsidebar-wrapper{width:195px;float:left;padding-top:0px;padding-left:0px;margin-left:0px;margin-right:5px;word-wrap:break-word;overflow:hidden;}
#rsidebar-wrapper{width:195px;float:right;padding-top:0px;padding-right:0px;margin-left:5px;margin-right:0px;word-wrap:break-word;overflow:hidden;}

Gracias...

yagami19 · #2 (**permalink**) 30/03/2012, 20:14

alguna idea ???

ArturoGallegos · #3 (**permalink**) 30/03/2012, 20:33

que te parece la linea donde se mencione el nombre de la imagen que reemplazaste?

diamari · #4 (**permalink**) 31/03/2012, 05:37

Mirando tu pagina, lo mas fácil seria removiendo los imágenes actuales y colocando el que contiene el enlace bajo <div class="outer" id="header-wrapper"> sino habría que modificar varios elementos para dejarlo donde se encuentra actualmente.

yagami19 · #5 (**permalink**) 31/03/2012, 17:55

Cita:

Iniciado por diamari

Mirando tu pagina, lo mas fácil seria removiendo los imágenes actuales y colocando el que contiene el enlace bajo <div class="outer" id="header-wrapper"> sino habría que modificar varios elementos para dejarlo donde se encuentra actualmente.

hola no te entendi bien

por ejm; en esta linea;

#body-wrapper3{margin:0px;padding:0px;background: url("http://4.bp.blogspot.com/-OT2MAxE6lUA/TgBISEKFfSI/AAAAAAAAATQ/UTcyqUpKmYE/s1600/wrapper.png") repeat-x scroll 0 0 transparent;}

yo cambie esa imagen por el banner q puse de ejm..
pero lo malo q repite

... yo kiero q no repita--
y en esa opcion dice repeat-x
y le intente poner no-repeat-x
pero me kedo igual osea seghia repetiendo

bueno habra una forma para q no repita y aunentar la altura

Gracias..

ArturoGallegos · #6 (**permalink**) 31/03/2012, 18:00

no-repeat-x? eso me suena a que te debemos recomendar libros CSS

empieza por aqui para resolver tu duda
http://www.librosweb.es/referencia/css/background.html

diamari · #7 (**permalink**) 01/04/2012, 05:55

Si buscas el linea <div class="outer" id="header-wrapper"> en tu código y colocas el del imagen justo debajo debería mostrarse bien.

Código:

<div class="outer" id="header-wrapper">
<a href="http://foroprowrestling.blogspot.com/" style="display: block">
<img alt="Westremania 28 en español | en vivo" height="180px; " id="Header1_headerimg" src="http://2.bp.blogspot.com/-xS_FTIwKJlo/T3Pq0Xt3qtI/AAAAAAAAASY/hMfuzShHcDU/s985/1.jpg" style="display: block;padding-left:0px;padding-top:25px;" width="980px; ">
</a>
<div class="header section" id="header"><div class="widget Header" id="Header1">
<div id="header-inner">
<!-- Removerlo de aquí -->
</div>
</div></div>

yagami19 · #8 (**permalink**) 01/04/2012, 07:18

Cita:

Iniciado por diamari

Si buscas el linea <div class="outer" id="header-wrapper"> en tu código y colocas el del imagen justo debajo debería mostrarse bien.

Código:

<div class="outer" id="header-wrapper">
<a href="http://foroprowrestling.blogspot.com/" style="display: block">
<img alt="Westremania 28 en español | en vivo" height="180px; " id="Header1_headerimg" src="http://2.bp.blogspot.com/-xS_FTIwKJlo/T3Pq0Xt3qtI/AAAAAAAAASY/hMfuzShHcDU/s985/1.jpg" style="display: block;padding-left:0px;padding-top:25px;" width="980px; ">
</a>
<div class="header section" id="header"><div class="widget Header" id="Header1">
<div id="header-inner">
<!-- Removerlo de aquí -->
</div>
</div></div>

Hola

ya encontre esa linea..y lo reemplace con el codigo q me pasastes
pero me sale esto:

No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente. <br/>Mensaje de error de XML: The element type "img" must be terminated by the matching end-tag "</img>".

Error 500

creo q hay q cerrar la etiqueta de la imagen

diamari · #9 (**permalink**) 01/04/2012, 07:48

Que raro ya copie el código directamente de tu pagina pero solo tienes que añadir un / antes del > del etiqueta para cerrarlo así: />.

yagami19 · #10 (**permalink**) 01/04/2012, 08:08

Cita:

Iniciado por diamari

Que raro ya copie el código directamente de tu pagina pero solo tienes que añadir un / antes del > del etiqueta para cerrarlo así: />.

Gracias ya le aumente el / a la etiketa de la imagen y kedo..

miralo pero.... falta cuadrar
osea q el banner, suba un poco mas, centrarlo...
y agrandar la altura para q se aprecie por completo el banner, como se haria eso

diamari · #11 (**permalink**) 01/04/2012, 08:56

Para eso tienes que modificar el height del header-wrapper en el css creo que con 200px te da y remover el padding-top:25px; del atributo style del img.

yagami19 · #12 (**permalink**) 01/04/2012, 10:58

Cita:

Iniciado por diamari

Para eso tienes que modificar el height del header-wrapper en el css creo que con 200px te da y remover el padding-top:25px; del atributo style del img.

muchas gracias... ahora si cuadro perfecto

pero ahora el logo q se pone directo en el diseño del blog...
salen atras de ese banner ...

osea sale oculto..

diamari · #13 (**permalink**) 02/04/2012, 06:03

¿Como es el logo?

yagami19 · #14 (**permalink**) 04/04/2012, 17:40

Cita:

Iniciado por diamari

¿Como es el logo?

Hola, es un logo simple, q siempre iba sobre el banner del fondo

ya esta subido, pero sale oculto

diamari · #15 (**permalink**) 04/04/2012, 19:14

En ese caso vas a tener que mover el image de fondo. Coloca esto en el css de header-wrapper:

background-image: url(url del image);
background-repeat: no-repeat;

luego tendrás que ajustar tu logo.