Centrar una imagen con CSS

This post was published 10 years ago. It may be exremely 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.

One Response to Centrar una imagen con CSS

Leave a Reply