Currently, I am working on creating a parallax effect within a div through adjusting the background image based on scroll movements. My goal is to ensure this effect remains responsive across different screen sizes. I want the image to scale appropriately with 100% width and an automatic height adjustment. However, as the image is set as a background, the div itself appears empty necessitating me to assign it a fixed height. This limitation restricts the responsiveness of the design since the height is predetermined. Is there a way to maintain flexibility in changing the height according to the background image's requirements?
To better understand my query, please refer to the following fiddle: 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;
}