css - toda - ¿Cómo mostrar la imagen de fondo de altura completa?

imagen de fondo html5 css3

Question

Tengo una imagen de fondo tipo foto (no paisaje) con 979 píxeles de ancho por 1200 píxeles de alto. Me gustaría configurarlo para que flote a la izquierda y muestre una altura de imagen completa al 100%, sin la necesidad de desplazarse hacia arriba o hacia abajo (independientemente de la longitud del contenido).

Este es mi código CSS, pero no funciona:

img, media {
    max-width: 100%;
}

body {
    background-color: white;
    background-image: url(''../images/bg-image.jpg'');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left top;
}

Answer 1

CSS puede hacer eso con background-size: cover;

Pero para ser más detallado y admitir más navegadores ...

Use una relación de aspecto como esta:

 aspectRatio      = $bg.width() / $bg.height();

FIDDLE

Answer 2

Puedes hacerlo con el código que tienes, solo necesitas asegurarte de que html y body estén configurados al 100% de altura.

Demostración: http://jsfiddle.net/kevinPHPkevin/a7eGN/

html, body {
    height:100%;
} 

body {
    background-color: white;
    background-image: url(''http://www.canvaz.com/portrait/charcoal-1.jpg'');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left top;
}