Centrar una imagen con CSS

Beware: This post was published 9 years ago and its content may be outdated.

Hace un par de días estuve ayudando a JaimePG con el nuevo diseño temporal de Extrasims.

El objetivo era el siguiente: Centrar el logo de Extrasims, evitar que se repitiese y a ambos lados mostrar un fondo similar al del logo.

Para lograrlo necesitamos un poco de CSS, HTML y diseño gráfico.

Las imágenes

En primer lugar crearemos las imágenes que corresponden al logo y al fondo del logo. Obviamente en cada caso son diferentes, pero os dejo el ejemplo de mi logo:

También debemos crear una imagen que contenga el mismo fondo que el logo, pero vacío. En caso dejo el degradado pero elimino texto:

Una vez tengamos esto listo podemos pasar al CSS y al HTML.

Código CSS

Bien, primero arreglaremos el CSS. Añadimos entre las etiquetas <head> y </head>:

<style type="text/css">
</style>

Nota: Es recomendable poner el código CSS en un archivo diferente, pero como en este tutorial usaremos poco CSS, lo dejaremos en el index. Si añadís más CSS, mejor pasadlo todo a un archivo aparte.

Crearemos IDs: cabecera y logo.

La cabecera tendrá de fondo la imagen que hemos seleccionado, de ancho el 100% de la página y de alto lo mismo que la imagen.

Quedando en mi caso así:

#cabecera {
background:url(logo_fondo.png) repeat-x;
width:100%;
height:100px;
}

El atributo width determina la anchura y height la altura. El atributo background nos permite definir la imagen de fondo y su tipo de repetición (entre otras cosas), repeat-x repetirá sólo horizontalmente, repeat-y lo hará verticalmente, repeat en ambas dimensiones y no-repeat no repetirá en ninguna dimensión.

Ahora pasamo al logo. Usaremos un margen automático para que se centre horizontalmente, y usaremos una anchura y altura igual a las del logo. El fondo no se repetirá.

El código del logo quedará más o menos así (recordad que en cada caso variarán las anchuras y alturas):

#logo {
background:url(logo.png) no-repeat;
width:320px;
height:100px;
margin:0 auto;
}

Con esto ya tenemos todo el código CSS necesario.

El código HTML

Lo último que necesitamos es el código HTML. En nuestro caso tenemos dos capas (divs): una con ID cabecera y otra cuyo ID es logo.

Estas capas mostrarán la imagen de fondo y el fogo (respectivamente).

El código que usaremos será este:

<div id="cabecera">
<div id="logo">
</div>
</div>

Y finalmente podremos ver nuestro logo centrado, como queríamos.

Demostración

Como en otros tutoriales, os dejo una página con una demostración del ejemplo.