Imagen de cabecera centrada

[masi10]

Hola, tengo un problema con mi imagen de cabecera, en el html tengo lo siguiente:

<div id="cabecera">
<img src="images/milogo.png" alt="Imagen"/>
</div>

y en el css tengo lo siguiente:

#cabecera
{
text-align:center;
padding-top:2%;
padding-bottom:2%;
}

Así la imagen me sale bien y centrada, pero, cómo podría hacerlo para que la imagen me salga de la misma forma a través de css?

He probado lo siguiente:

<div id="cabecera">

</div>

Aquí debería dejar el contenido del div vacío? No es un poco "feo" hacer esto?

Y por otro lado en el css:

#cabecera
{
background: url('../images/milogo.png') no-repeat fixed center;
padding-top:2%;
padding-bottom:2%;
}

Y la imagen ni me aparece.

Si en cambio pongo:

#cabecera
{
background: url('../images/milogo.png');
padding-top:2%;
padding-bottom:2%;
}

Me aparece pero sin centrar. Cómo podría centrarla a través de css y qué pongo entre las etiquetas div del html?

Gracias.

[DragonX]

#cabecera{margin:0 auto;}

[masi10]

También lo había probado ya porque lo había visto buscando por internet y tampoco me funciona, deja la imagen a la izquierda sin centrar.

Y lo que quiero saber también a parte de centrar, es si debo añadir la url en el css y si dejo la etiqueta div vacía o no.

Gracias.

[Ribon]

Lo que pasa es que por deecto el tamaño de los Divs es 0, y no porque le pongas una imagen de fiondo esta ajustará el tamaño del div.

lo que debes hacer es asignarle un tamaño al div#cabecera igual o mayor al tamaño de la imagen de fondo (para que esta se logre visializar), por ejemplo

Código CSS:

#cabecera{
background: url(laimagen) no-repeat center;
width:900px; /*El ancho de la imagen de fondo*/
height:120px; /*El alto de la imagen de fondo*/
}
 

Espero te haya ayudado saludos

[masi10]

Iniciado por Ribon

Lo que pasa es que por deecto el tamaño de los Divs es 0, y no porque le pongas una imagen de fiondo esta ajustará el tamaño del div.

lo que debes hacer es asignarle un tamaño al div#cabecera igual o mayor al tamaño de la imagen de fondo (para que esta se logre visializar), por ejemplo

Código CSS:

#cabecera{
background: url(laimagen) no-repeat center;
width:900px; /*El ancho de la imagen de fondo*/
height:120px; /*El alto de la imagen de fondo*/
}
 

Espero te haya ayudado saludos

Gracias Ribon.

La imagen mide 700x100, entonces, hago lo que dices con estas medidas y me deja la imagen a la izquierda también sin centrar, si le pongo más tamaño (1000x300 por ejemplo) ya me la deja centrada.

Al final lo que hay que hacer es centrarla "a ojo" modificando el tamaño en lugar de tener una propiedad center en css que te lo centre automáticamente. Me parece una chapuza del css pero parece que no hay otro camino...

Y el div del html, quedaría vacío? Es correcto hacer esto?

Gracias.

[Ribon]

Si es correcto, auqnue por lo general yo recomendaría hacer esto si vas a poner contenido sobre la cabecera (o sea sobre la imagen de fondo) ya que también es posible hacerlo con <img> pero bueno, se usa mucho lo de poner el banner como background para que no sea descargable el banner en ciertos navegadores y asdf

[masi10]

Gracias por tu ayuda, ya lo tengo todo claro.

Saludos.

[masi10]

Una última pregunta. Mi web se ve bien en firefox y en chrome, pero en internet explorer se ven las letras raras (no hace caso del tipo de letra que le he dicho que use desde el css), si le doy a "vista de compatibilidad" me deja la visión de la web ya bien igual que con firefox y chrome con la familia de letra que le he asignado.

Y otra cosa, en mi monitor de 17" panorámico se ve perfecta la web, pero si la veo desde un monitor de 17 normal se ve toda descentrada y si la ejecuto desde otro ordenador con internet explorer se ve totalmente descentrada y hecha un asco.

Existe alguna forma de remediar esto?

[Ribon]

Organizar bien tus DIVs
y utilizar estilos que sean compatibles en la mayoria de los navegadores.

[masi10]

Ok, tomo nota.