Centrar una imagen con CSS
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 reply on “Centrar una imagen con CSS”