Tip Precoz: Background al 100% con CSS3

29/mar/2012 7

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. Urbanchip [#]

    Impecable como siempre. Gracias por el TIP.

  2. Albert [#]

    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%;
    }

  3. Jorge Epuñan [#]

    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.

  4. Fondo al 100% con CSS3 | UrbanBlog [#]

    […] Ejemplo: CSSLab Fuente: CSSLab […]

  5. ricardo gonzalez [#]

    me podrian enviar un ejemplo con el codigo aplicado?

  6. Fondos múltiples en CSS3 y un truco gradual → CSSLab [#]

    […] 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 […]

  7. Roberto [#]

    el ejemplo en css2 de Albert no funciona en IE

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab