Tip Precoz: Background al 100% con CSS3

29/Mar/2012 351

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+

Comentarios

  1. Teoblabs [#]

    name brand viagra online

CSSLab