SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot kevinritt's Avatar
    Join Date
    Nov 2002
    Location
    Lynn, Massachusetts-United States
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    gradient background question

    I have a mock up with a gradient background for a 3 column text area. Is there a way to have that expand if more text gets added:

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    You can do gradients with CSS3, but that won't work on all browsers and isn't as fancy as that bg image you have. The best thing to do here is to finish the bg image with a specific color, and then set the background color of the container to the same value, so that if the container height grows, it won't be obvious that the bg image is not as tall as the container.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I'd do much as Ralph said and make the bottom round corner section a solid colour then I'd add a wrapper to the top section with a repeating-y slice (with borders) that matches the bottom of the gradient and lies under the top section and is only revealed when the text stretches downwards. That assumes you are not using transparent corners otherwise the repeat would show through at the corners.

  4. #4
    Error 404: Life not found silver trophybronze trophy
    Join Date
    Dec 2007
    Location
    UK Nr Manchester
    Posts
    3,460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep, that's what I'd do (and have done many times) too. Just make the bg colour of the div the same colour as the bottom colour of the gradient, then it will epxand down as far as you want and make the bottom corners that colour too.
    It's 530 people, but do you really get it?
    ImgWebDesign - Web design in Buxton, High Peak, Derbyshire UK.

  5. #5
    SitePoint Zealot kevinritt's Avatar
    Join Date
    Nov 2002
    Location
    Lynn, Massachusetts-United States
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I'd do much as Ralph said and make the bottom round corner section a solid colour then I'd add a wrapper to the top section with a repeating-y slice (with borders) that matches the bottom of the gradient and lies under the top section and is only revealed when the text stretches downwards. That assumes you are not using transparent corners otherwise the repeat would show through at the corners.
    I am using transparent corners. Is there a way to have the corners transparent and the div fill as it stretches? For example if you look at the newsletter area here you'll see the dark background behind the two top corners - the bottom corners are supposed to look rounded (transparent) but the background repeat is showing

  6. #6
    SitePoint Zealot kevinritt's Avatar
    Join Date
    Nov 2002
    Location
    Lynn, Massachusetts-United States
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess it was a pretty stupid question - I can just match the background behind the corners to the background on the page.


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
  •