Imagen llena fondo de página web con CSS3

El objetivo de este código CSS es lograr lo siguiente:

que la imagen llene el fondo sin dejar espacios en blanco y fijarla.
escalar imagen de ser necesario.
mantener proporción de imagen (relación de aspecto).
imagen centrada en la página.
que sea multi-navegador (cross-browser).

Esto se logra con un par de trucos CSS y por supuesto una imagen de gran tamaño (en la mayoria de los casos). Pero, mediante CSS3 es posible realizar esto sin sufir mucho, ya que se cuenta con la propiedad background-size. La usamos en el elemento HTML.

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

Una explicación general: hemos especificado la imagen, la hemos centrado y fijado; y con la propiedad background-size le indicamos que cubra toda la página.

Ver demo. Este código funciona con navegadores de versiones recientes.

Bueno el título del post dice CSS3 pero también podemos probar algunos códigos CSS para navegadores con versiones no tan actuales.

img.bg {
   /* Set rules to fill background */
   min-height: 100%;
   min-width: 1024px;

   /* Set up proportionate scaling */
   width: 100%;
   height: auto;
 
   /* Set up positioning */
   position: fixed;
   top: 0;
   left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
   img.bg {
      left: 50%;
      margin-left: -512px;   /* 50% */
   }
}