2006-06-29

Centrar contenido e imagen de fondo con css

Hace un tiempo trabajé en un proyecto en el que se necesitaba centrar en vertical y horizontal un pequeño cuadrado y que se viera más o menos igual en todas las resoluciones. También existía una imagen de un fondo con una especie de línea horizontal que debía pasar justo por debajo del cuadradito.

Ni que decir tiene que según la resolución de pantalla ambos elementos se desconfiguraban y opté en su día por "apañarlo" a la resolución más demandada. En este caso la de 1024x768 píxeles.

Estos días trabajando en otro proyecto he tenido la suerte de unir mi experiencia con algo que leí en insomnia.
Aquí se describe como centrar horizontalmente y verticalmente el contenido de un div. en mi caso lo he resuelto así:

body{
background-image:url(images/background.gif);
background-color:#000000;
background-position: center;
background-attachment: fixed;
background-repeat:repeat-x;
overflow:auto;
}

.centrado {
position: absolute;
top: 50%;
left: 50%;
margin-top: -204px; /*Restamos la mitad de alto*/
margin-left: -350px; /*Restamos la mitad de ancho*/
}

Manipulando la imagen adecuadamente se consigue que tanto el contenido como la imagen de fondo estén perfectamente centradas para cualquier tipo de resolución.

La clase .centrado se aplica sobre un div. Para este caso, se trataba de la portada de la web y sólo era necesario este div y su contenido...

12 comentarios:

Anónimo dijo...

mil gracias me sirvio mucho

Anónimo dijo...

Mil gracias. Perfecto. Despues de 5 días, me has resuelto el problema.

cristian dijo...

aporto lo siguiente y funca mejor. pon así en tu CSS:

background: #720000 url(imaganes/bg.png)no-repeat scroll center top;

Patricia Ale dijo...

Gracias... me has resuelto el problemillaaa
I. Love You!

Anónimo dijo...

realmente brillante, enhorabuena. Ha mejorado bastante la presentación de mi web

Tefi dijo...

GENIAL!
ME SALVASTE
sos un idolo!!!
besooos!

Anónimo dijo...

Muchas gracias, servirá para la publicación de mi primera página.

Anónimo dijo...

Gracias, gracias, gracias!!! Una grandísma aportación!

Anónimo dijo...

Genial :D!

Anónimo dijo...

de puta nai! genial genial , gracias miiiiiil

Jaime dijo...

Esta propiedad de css puede ayudar mucho para centrar imágenes background de forma vertical:
background-position-y: center;
O si quieren centrarla horizontalmente:
background-position-x: center;
Saludos!!!

Jaime dijo...

Las siguientes propiedades css pueden ayudar a realizar centrados de las imagenes background:
background-position-y: center; (centrado vertical)
background-position-x: center; (centrado horizontal)
Espero que les sirva.
Saludos!!