Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts

    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/forum...ale-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?"
    Last edited by ptrcao; 12-12-2010 at 05:39 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,740
    Thanks
    22
    Thanked 1,837 Times in 1,821 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Jul 2010
    Posts
    24
    Thanks
    0
    Thanked 2 Times in 2 Posts
    nm . . .
    You are familiar with computers, right?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,740
    Thanks
    22
    Thanked 1,837 Times in 1,821 Posts
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    ptrcao (12-12-2010)

  • #5
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by agxphoto View Post
    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!
    Last edited by ptrcao; 12-12-2010 at 08:33 PM.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by Excavator View Post
    This 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...ackground-size
    http://dev.w3.org/csswg/css3-backgro...ackground-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.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •