View Full Version : Scale to fit image to container?

12-12-2010, 10:33 AM
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?"

12-12-2010, 11:05 AM
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.

12-12-2010, 05:42 PM
nm . . .

12-12-2010, 06:04 PM
Some more on that - http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-size

12-12-2010, 08:29 PM
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!

12-13-2010, 10:20 AM
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:


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.