SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Scaling background images - horizontally?

    I've seen a couple of site make use of something like (i.e. Pownce)

    Code:
    ul.notes li, #note-div, h3.public-filter {
    background:transparent url(/img/keemun/note-back.png) no-repeat scroll 0pt 100%;
    }
    ... where a comment container will use the same background-image which scales to its height. Although if the comment goes taller than the background-image's height (in this situation 800px) it's aligned to the bottom.

    >>> I was wondering if there is such a technique (if that's what its referred to) for using it horizontally?

    I'm trying to see if I can apply it to something like
    Code:
    <a class="button">...</a>
    ... this would save some requests, space and time to design (add or update) if its even possible. I hope that make sense. Pointers/help greatly appreciated...

    TIA,
    Sherwin

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I hope that make sense.
    I'm afraid you lost me there

    Try explaining it again and maybe it'll sink in.

  3. #3
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I'm afraid you lost me there

    Try explaining it again and maybe it'll sink in.
    It's probably best if I send you a Pownce invite(?) =) ... so you can see a working example, or I'll update the thread w/ a cut&paste of sample code so everyone can see it later today.

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wonder whether he's talking about using some kind of gradient which fills a container but then fades into the background colour of the container at the bottom if the text forces it's height larger than the image?

    In most cases you'd just apply background-position: bottom; and ensure that the top of the gradient matches the background colour of the container.

    Hope that helps, although like Paul's mentioned, it's not exactly clear what you're after so maybe a link to an example might help if this doesn't help

  5. #5
    SitePoint Zealot marbly's Avatar
    Join Date
    Nov 2005
    Location
    Croatia
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you sure you're asking about stretching images? Because you can't do that with CSS.

    You're probably asking about controling the positioning of background images within their containers > you saw an example where some container had a bg image that was bigger than the containers height or width, so when the container expanded (with more content) more of the bg image was revealed.

    Yes you can do it horizontally > the first number (0pt in your example) controls the horizontal positioning of the bg image while the second number (100%) controls the vertical. If you put

    background:transparent url(/img/keemun/note-back.png) no-repeat scroll 100% 0%;

    the image will be aligned to the right and to the top of the container

    100% 100% > always aligned right bottom

    50% 50% > centered within the container


    btw if you dont use shorthand property "background" the actual property is called background-position

  6. #6
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's kind of hard to explain w/ plain text... as we all can "see" =)

    I'll try to get a test page up later. Thanks.

  7. #7
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you may be misunderstanding the way a browser renders background images. A background will never "stretch" with a container, but will always be rendered full size. However, if the background image is larger than the container, it will be cropped to the container's size. Therefore, if your <a> background image is wider than the <a> element itself, the background will not be visible outside the <a> even though the <a> element may be much smaller.


Bookmarks

Posting Permissions

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