Como centrar un Background con CSS
Publicado en css el 25/08/06 a las 06:33 pm
Hoy estuve buscando la manera de centrar un background en el centro de una página, después de un rato de búsqueda he aquí el resultado:
body {
background: transparent url(imagen.jpg) no-repeat center center;
background-attachment: fixed;
}
Gracias a Pablo por el fixed.
18 comentarios
Dr. Bizarre
dijo el 25/08/06 a las 10:44 pm
ya esta en mi del.icio.us (y)
Victor Bracco
dijo el 26/08/06 a las 03:33 pm
Ya esta en mi sabro.us!
Octavio Alvarez
dijo el 27/08/06 a las 10:54 am
Cabe mencionar que al hacer scrolling esta técnica utiliza más procesador que los fondos no-fixed, pues a cada scroll hay que volver a renderear toda la página.
En máquinas viejas (< 500Mhz) la página se verá torpe, lenta, a menos que haya una buena tarjeta de video.
stan
dijo el 28/08/06 a las 10:24 am
no habia pensado en ese inconveniente Octavio, creo que probare con unas de 300 mhz haner que resulta :D
josue
dijo el 28/08/06 a las 12:29 pm
quiero conocer gente nueva de todas partes del planeta!!!!!!!!
zoftweb
dijo el 28/08/06 a las 11:35 pm
que tal si empiezas por tu colonia? :P
Mario A Chavez
dijo el 29/08/06 a las 12:51 am
Ja, ja ... zoftweb, muy buena tu respuesta !
Octavio Alvarez
dijo el 29/08/06 a las 11:59 am
Zoftweb, excelente respuesta. Tengo que admitir que yo sufro del mismo síndrome.
Victor
dijo el 29/08/06 a las 02:43 pm
jajaja, se pasan. jajaja
Mudanzas
dijo el 20/09/06 a las 02:01 pm
Una información muy util ;) Te sigo leyendo.
Diseño Web
dijo el 03/07/08 a las 05:59 am
Con esta respuesta has solucionado muchos problemas. Gracias
bardo
dijo el 01/10/08 a las 05:48 am
Estoy hojeando el blog y copiando código a diestro y siniestro, me está siendo muy útil .Muchas gracias
Jordi
dijo el 04/10/08 a las 08:40 am
Muchas gracias por el artículo. Me gustaría añadir que si queréis centrar el fondo y además que aparezca en la parte superior, debéis poner el siguiente código:
body {
background:url(Assets/header.gif) no-repeat top center;
background-attachment: fixed;
}
Espero que sirva de ayuda.
Bernardo
dijo el 01/04/09 a las 12:22 pm
Genial!!!
ricardo
dijo el 15/10/09 a las 07:25 pm
muy buena información, busque mucho un ejemplo asÃ... gracias
Ana
dijo el 28/09/10 a las 10:11 am
Muy buen dato!!!! me salvaron!!!
Daniel Gutierrez
dijo el 02/05/11 a las 04:50 pm
Muy buen dato mil gracias
Danny
dijo el 06/10/11 a las 02:15 pm
Muchas gracias por compartir el codigo, funciona a la perfeccion!