Как показать фоновое изображение полной высоты?

У меня есть фоновое изображение типа фото (не пейзаж) с шириной 979 пикселей по высоте 1200 пикселей. Я бы хотел, чтобы он плавал влево и показывал фиксированную высоту 100% полной высоты, без необходимости прокрутки вверх/вниз (независимо от длины содержимого).

Это мой CSS-код, но он не работает:

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

Ответы

Ответ 1

Вы можете сделать это с помощью кода, который у вас есть, вам просто нужно убедиться, что html и body установлены на 100% высоту.

Демо: 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;
}

Ответ 2

CSS может сделать это с помощью background-size: cover;

Но чтобы быть более подробным и поддерживать больше браузеров...

Используйте соотношение сторон следующим образом:

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

FIDDLE