I am trying to put together a repsonsive website where a certain image basically scales nicely when I move the browser windown in from the right.
But whats happening is that I am using a strict height as below, as have tried max-height and min-height and it rsults in the image not showing at all.
But what my problem is that as the div with the background image is scaling, its still keeping its original height.
position:relative; width:100%; height:300px; margin-bottom:6px; margin-top:9px; background-image:url(../site_images/welcome_Background.jpg); background-repeat:no-repeat; background-size:contain; background-color:#FF0000;
This is the site, which can be seen what Im trying to do by sliding the browser window in from the right.
What I would liek to happen is rather than the height:300px; staying, instead it also reduces to fit the image, and the elements below then follwo it up too.
But when I change height to say max-height, or height:auto etc, it doesnt show at all then