CSS: Making a background start repeating for a certain point

[tominated]

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

[quixotic]

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.

[tominated]

http://img.skitch.com/20080131-1y6gstgg48taw1tg5u277eu3tj.jpg

hopefully this explains it better

[Markleshark]

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'].

[angelwatt]

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.

[quixotic]

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>

[tominated]

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>

OK, now this is the answer I am looking for!

[quixotic]

Excellent! Happy coding...

BTW, Radon is a very cool browser :)