CSS: Making a background start repeating for a certain point

Discussion in 'Web Design and Development' started by tominated, Jan 31, 2008.

  1. tominated macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #1
    Hi everyone. I'm making a new rapidweaver template, but i want the content to have a small gradient at the top and the rest be a 1px high img of the flat part of the bg. I'm trying to have a containing element have the gradient bg at the top, but i cant get the flat area with the 1px bg to start repeating wher i set the positioning. It just spills over to where the gradient is and makes it look stupid. very stupid. if it is too confusing tell me and i will try to explain better.
    Tom
     
  2. quixotic macrumors regular

    Joined:
    Aug 4, 2003
    Location:
    San Francisco, CA
    #2
    I'm not exactly clear what you're trying to achieve (a quick mock up would help), but I don't think you can do what you want in a single div. If it repeats it'll just fill the whole thing in whatever direction(s) you set. You can try nesting a couple of div's, each with their own background, and setting the padding and margins to achieve what you want though.
     
  3. tominated thread starter macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
  4. Markleshark macrumors 603

    Markleshark

    Joined:
    Aug 15, 2006
    Location:
    Carlisle, Up Norf!
    #4
    I think you'll have to add another div in your 'Inner div' Make it the same width but a bit shorter and you'll be able to set it to reside at the bottom [Of the 'Inner Div'].
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    I'm sure I don't follow his 100%, but here are the CSS background properties, http://www.w3schools.com/css/css_background.asp which shows all you can do with backgrounds. Likely you'll be trying to use background-position and repeat-x.
     
  6. quixotic macrumors regular

    Joined:
    Aug 4, 2003
    Location:
    San Francisco, CA
    #6
    Yes. You'll want your container div to have a top padding with a height equal to your "start" position. Of course this throws your content off. To compensate, nest one more div, without a background. Give this last div a position of relative and a top position equal to the height of your start position. Try this:

    CSS...

    #container {
    background:url(img/bkg1.gif);
    background-repeat:repeat-x;
    padding-top:100px;
    }

    #inner {
    background:url(img/bkg2.gif);
    background-repeat:repeat;
    }

    #content {
    position:relative;
    top:-100px;
    }

    HTML...
    <div id="container">
    <div id="inner">
    <div id="content">Your "Title" and contents</div>
    </div>
    </div>
     
  7. tominated thread starter macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #7
    OK, now this is the answer I am looking for!
     
  8. quixotic macrumors regular

    Joined:
    Aug 4, 2003
    Location:
    San Francisco, CA
    #8
    Excellent! Happy coding...

    BTW, Radon is a very cool browser :)
     

Share This Page