Отзывчивый div с фоном

Question

Я делаю эффект параллакса внутри div, который я выполняю, настраивая фоновое изображение с помощью прокрутки, и мне нужно, чтобы он реагировал на разные размеры экрана. Я бы хотел, чтобы изображение масштабировалось соответствующим образом исходя из 100% ширины и автоматической высоты. Проблема в том, что, поскольку изображение является фоновым изображением, div пусто, поэтому мне нужно назначить ему высоту. Когда вы это делаете, отклика ограничена любой установленной вами высотой. Как я могу решить эту проблему так, чтобы высота могла свободно меняться с любой высотой, на которой должно быть фоновое изображение?

Это будет иметь смысл, когда вы смотрите на скрипку http://jsfiddle.net/d2620kgk/

HTML:

<div id='bg-image'></div> 

CSS:

#bg-image{ 
    background-image: url('../images/portfolio/stoneybrook-full4.jpg'); 
    background-size:100% auto; 
    width:100%; 
    height:500px; 
    background-repeat:no-repeat; 
} 

Answer 1

#bg-image{ 
background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Grant_DeVolson_Wood_-_American_Gothic.jpg/639px-Grant_DeVolson_Wood_-_American_Gothic.jpg'); 
    background-size:100%; 
    position: absolute; 
    width:100%; 
    height:100%; 
    top: 0; 
    left: 0; 
    background-repeat:no-repeat; 
}