Para obtener este fantástico efecto he visto de todo, incluidos trucos en los que se coloca una imagen dentro de un div y se juega con las propiedades de esa capa (algo no muy elegante pero funcional) Afortunadamente con CSS3 es mucho más sencillo de lo que parece y no toma mucho tiempo hacerlo. Lo que vamos a hacer es usar la propiedad background-size para decirle a nuestro navegador que escale la imagen al 100% tanto en ancho como en alto, obviamente necesitamos una imagen de grandes dimensiones para hacer esto.

Esta técnica la aprendí hace tiempo de Tutorial Zine y luego le agregué algunas cosas adicionales, consiste básicamente en utilizar el tag HTML en lugar de BODY, veamos el código.

html{  
    background:url('fondo.jpg') no-repeat center center;
    min-height:100%;
    background-size:cover;
}

La propiedad background-size permite especificar el tamaño del background en píxeles o porcentajes, pero también agrega dos valores interesantes que son cover y contain. El primero permite que la imagen cubra toda el área de un elemento y el segundo valor se asegura de que la imagen se ajuste al largo del elemento.

En nuestro caso, pedimos que no repita la imagen (no-repeat), la centre tanto en X como en Y (center center) y que utilice el 100% del alto de la ventana de nuestro navegador como mínimo (min-height: 100%) quedando algo como esto

Probar el Ejemplo

Bakcground al 100% para móviles

Como la imagen de fondo puede ser demasiado grande para nuestros dispositivos móviles y lo que buscamos es optimizar la carga, vamos a usar media queries y algunas imágenes un poco más pequeñas para ajustarse según el dispositivo, en este ejemplo consideraré un iPad ya sea que este horizontal (landscape) o vertical (portrait) y una medida standard para mucho móviles que es 480 x 320.

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {	
	html{ background:url('fondo_ipad_landscape.jpg') no-repeat center center; min-height:100%;}
}
/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	html{ background:url('fondo_ipad_portrait.jpg') no-repeat center center; min-height:100%;}
}
 
/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
	html{ background:url('fondo_smart_portrait.jpg') no-repeat center center; min-height:100%;}
}
/* Smartphones (landscape) ----------- */
@media only screen 
and (max-width : 480px) {
	html{ background:url('fondo_smart_landscape.jpg') no-repeat center center; min-height:100%;}
}

Probar el Ejemplo