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