Scale to fit image to container?

I'm trying to attempt a gradient colour as the tab fill for the side menus. As you can see the tab heights vary depending on text overflow - which is fine - that's how I want it in this case. However, it appears as if the gradient background is higher than can fit in the one-line tabs. The effect is that the entire background is not being used for the smaller tabs.

I think my goal here then is to have the image scale to fit its li container.

Question has already been asked and unsatisfactorily answered at http://www.velocityreviews.com/forums/t160219-css-background-image-possible-to-scale-image.html
"Is it possible to specify a background-image for a CSS class and have that
image scale to fit whatever space is taken by the content of the object
using that class?"

Hello ptrcao,
No, CSS can't do that. CSS3 may have something I'm not aware of but there would only be limited support for that.
You probably need a jQuery solution.

nm . . .

Some more on that - http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-size

nm . . .

Aside to agxphoto:

yeh don't worry about that link from earlier...i saw it and was supposed to edit it out from the very beginning then forgot to!

Some more on that - http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-sizeThis draft is from 2002. There have been major changes since that draft. The current draft is from 2010 and the current editor's draft was edited 11 days ago:

http://www.w3.org/TR/css3-background/#the-background-size
http://dev.w3.org/csswg/css3-background/#the-background-size

For the OP's sake: A demo is at http://www.css3.info/preview/background-size/. A visit to that page indicates that the property is supported in Google Chrome 9 (Dev Channel) and Safari 5. The demo doesn't work in Opera 10.6 or Opera 11 (Beta) though; that's contrary to the claim of Opera 9.5+ support on that page. It doesn't work in Firefox 4.0 Beta 7 either.