background-size - height precedence over width?

[ralphonzo]

Is there any way to make the height of background-size take precedence over the width? If you resize the browser window at:

http://cambridgeglasshouse.co.uk/about.asp

widthwise, you'll see the image leave the dock at the foot of the screen and lose none of its constraints; whereas if its minimised heightwise, elements of the image disappear below the menu bar, as the width is maintained percentagewise.

background-image: url(images/bg-2.jpg);
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;

How can the width be "ignored" here?

 

[Vragabond]

background-size: auto 100%;

This should work, however, I believe it fails in your code, because you don't really have any elements that are part of normal document flow inside your body. Heights are much more volatile than widths in HTML and your body is very small in height (because of lack of statically positioned content), while your width is still the same as viewport (because this is how widths work).

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[ralphonzo]

Thanks for the reply, but I'm afraid your concerns were founded and that doesn't give the desired affect. I think the issue is more with the cruddy images we were supplied!!

 

[Vragabond]

If you add height: 100% to your html and body tags, I think the code above produces the result you want.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]