Entramos en una era donde cada vez más podemos aprovechar las bondades de CSS3 sin tener que parchar funcionalidad con scripts y plugins de JavaScript. En esta ocasión, utilizaremos una propiedad CSS3 para hacer que una imagen de fondo cubra el 100% de la ventana, escalándose hasta adaptarse. Afortunadamente los browsers están aplicando suavizado a los elementos por defecto, y en general la imagen no debería de verse (muy) pixelada (si está en una resolución decente y bien optimizada, claro).
background-size: cover;Esta propiedad (anexa) de background permite hacer lo que necesitamos. Lamentablemente estamos en una etapa en que los estándares y quienes los implementan no se ponen del todo de acuerdo y debemos utilizar esos molestosos prefijos, pero fuera de eso funciona de maravilla.
body {
background: url('../img/thai.jpg') center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}Soporte: Safari, Chrome, Firefox 3.6+, IE9+, Opera10+
Comentarios
Impecable como siempre. Gracias por el TIP.
Creo que se pude usar esto con CCS 2
#fondo {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#fondo img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}
Asi es Albert, existen muchas técnicas -la que muestras es una mas- pero involucra agregar un elemento (img) y posicionarlo de forma absoluta, y todo lo q puede involucrar esto con el resto de tus elementos de tu página.
Lo bueno de lo propuesto con CSS3 es q es un comportamiento nativo y q -convengamos- debiera siempre haber sido, desde CSS2.
[…] Ejemplo: CSSLab Fuente: CSSLab […]
me podrian enviar un ejemplo con el codigo aplicado?
[…] cual pesaría muchos kilos y lo pondría como fondo del <body> (quizás con el fondo al 100%), pero ahora la cosa cambió. Como el gradiente para CSS es una imagen, podemos utilizarlo […]
el ejemplo en css2 de Albert no funciona en IE