El objetivo aquí es una imagen de fondo en un sitio web que cubre la ventana del navegador en todo momento. Vamos a poner algunos detalles específicos sobre él:

  • Llena toda la página con la imagen, sin espacios en blanco
  • Escalas de imagen según sea necesario
  • Mantiene las proporciones de la imagen (relación de aspecto)
  • La imagen está centrada en la página
  • No causa barras de desplazamiento
  • Compatible entre navegadores como sea posible
  • No son unas artimañas de lujo como Flash

Impresionante, fácil y progresiva a la manera CSS3

Podemos hacer esto simplemente a través de CSS gracias a la propiedad background-size ahora en CSS3. Vamos a utilizar el elemento HTML (mejor que el body ya que tiene siempre al menos la altura de la ventana del navegador). Creamos un fondo fijo y centrado en él, y luego ajustamos su tamaño con background-size establecido en la palabra clave cubierta.

html {
        background: url(img/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Funciona en:

  • Safari 3 +
  • Chrome sea-cual-sea +
  • IE 9 +
  • Opera 10 + (Opera 9.5 compatible background- size pero no en las palabras clave)
  • Firefox 3.6 + (Firefox 4 soporta la versión prefijada non-vendor)

Solo CSS: Técnica 1

Aquí se utiliza un elemento <img> en línea (inline), que será capaz de cambiar el tamaño en cualquier navegador. Se plantea un mínimo de altura que mantiene rellenando la ventana del navegador en posición vertical, y establecer un ancho de 100%, lo que mantiene el llenado horizontal. También establece un mínimo de ancho de la anchura de la imagen para que la imagen no se haga más pequeña de lo que realmente es.

La pisca inteligente es usar una consulta de medios de comunicación (media query) para comprobar si la ventana del navegador es más pequeña que la imagen, y con un combinado en el margen izquierdo negativo y de porcentaje de izquierda que le mantenga centrada independientemente.

Es decir, en CSS sería así:

img.bg {
        /* Setea reglas para rellenar el fondo */
        min-height: 100%;
        min-width: 1024px;

        /* Setea una escala proporcional */
        width: 100%;
        height: auto;

        /* Setea el posicionamiento */
        position: fixed;
        top: 0;
        left: 0;
}

/* Esta parte tiene que ser específica de la imagen que se utilice */
@media screen and (max-width: 1024px) {
        img.bg {
                left: 50%;
                margin-left: -512px;   /* 50% */
        }
}

Funciona en:

  • Cualquier versión de los navegadores buenos: Safari / Chrome / Opera / Firefox
  • IE 6: Borked - pero probablemente corregible si se utiliza algún tipo de posicionamiento fijo
  • IE 7.8: Mayormente funciona, no se centra en los tamaños pequeños, pero llena bien la pantalla
  • IE 9: Funciona

Solo CSS: Técnica 2

Una forma bastante simple de manejar esto es poner una imagen en línea en la página, de posición fija a la parte superior izquierda, y darle un min-width y min-height de 100%, preservando su relación de aspecto.

HTML:

CSS:

#bg {
        position:fixed;
        top:0;
        left:0; 

        /* Conservar la relación de aspecto */
        min-width:100%;
        min-height:100%;
}

Sin embargo, esto no centra la imagen aún… Por lo tanto, podemos fijar que envolviendo la imagen en un div. A ese div lo haremos el doble de grande de la ventana del navegador. Luego la imagen se coloca, aún conserva su relación de aspecto y que cubre la ventana visible del explorador, y el punto muerto de eso.

HTML:

        

CSS:

#bg {
        position:fixed;
        top:-50%;
        left:-50%;
        width:200%;
        height:200%;
}
#bg img {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        min-width:50%;
        min-height:50%;
}

Funciona en:

  • Safari / Chrome / Firefox (no probé, pero las últimas versiones están muy bien) 
  • IE 8 + 
  • Opera (cualquier versión) y el IE fallan de la misma manera (mal colocado, no sé por qué)

EXTRA: el método con jQuery

Esta idea se convierte en mucho más fácil (desde una perspectiva CSS) si sabemos si la relación de aspecto de la imagen (<img> en línea que va a utilizar como fondo) es más grande o más pequeña que la relación de aspecto actual de la ventana del navegador. Si es inferior, entonces se puede establecer sólo el ancho a 100% en la imagen y sé que va a llenar la altura y anchura. Si es mayor, se puede establecer sólo la altura a 100% y sé que va a llenar tanto el alto y ancho.

Tenemos acceso a esta información a través de JavaScript. Como de costumbre por aquí, me gusta apoyarme en jQuery.

HTML:

CSS:

#bg { position: fixed; top: 0; left: 0; }
.fondo-ancho { width: 100%; }
.fondo-alto { height: 100%; }

JavaScript:

$(window).load(function() {    

        var laVentana        = $(window),
            $fondo           = $("#bg"),
            aspectoRelacion  = $fondo.width() / $fondo.height();

        function redimensionarFondo() {

                if ( (laVentana.width() / laVentana.height()) < aspectoRelacion ) {
                    $fondo
                        .removeClass()
                        .addClass('fondo-alto');
                } else {
                    $fondo
                        .removeClass()
                        .addClass('fondo-ancho');
                }

        }

        laVentana.resize(function() {
                redimensionarFondo();
        }).trigger("resize");

});

Funciona en:

  • IE7 + (probablemente podría funcionar en Internet Explorer 6 con una posición fija)
  • Prácticamente todos los demás

Bueno, espero les sirva de alguna forma y si tienen dudas u otra técnica que quieren compartir dejen sus comentarios!

Fuente: css-tricks.com