Background size;cover works well in width, but not in height

HTML & CSS
1

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.


#home_Help_Image{
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.

http://devchecksafetyfirst.csf.dcmanaged.com/responsive/

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

2

Would this help


#home_Help_Image{
  background: #ff0000 url(../site_images/welcome_Background.jpg) no-repeat;
  background-size:contain;
  height: auto;
  position: relative;
  margin: 9px 0 6px 0;
  max-width: 100%;
}

This isn’t tested, I’m not sure if you can use the shorthand background and background-size separately.

Sorry I always but my styles alphabetically - https://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

3

Your site doesn’t scale as the browser is narrowed, so the responsiveness of this is not working well anyway. There are all sorts of options, like

background-size: cover;

or

background-size: auto 315px;

etc.