viernes, 30 de marzo de 2012

Tip Precoz: Fondo al 100% con CSS3

Tip Precoz: Fondo al 100% con CSS3:
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;
}
Ver ejemplo
Soporte: Safari, Chrome, Firefox 3.6+, IE9+, Opera10+

No hay comentarios:

Publicar un comentario