Help Website Layout

[-=Swift=-]

OKay I have seen these sites and am working on my own. I have three pictues, one picture that is the border for the top, on for the middle, and one for the bottom.
What I want it to do is have the top have text within a certain part of the pic so it acts like a border with content part. And the second pic is a plain picture that is repeatable (Looks like a stretchd out version when put another one undernieth) and the footer to be moved farther down to when more text is added..
[BANNER]
|-------------------------------|- TOP
| TEXT HERE--------------------|- Picture
| TEXT HERE--------------------|
| TEXT HERE--------------------|- Middle
| TEXT HERE--------------------|-Picture
| TEXT HERE--------------------|
| TEXT HERE--------------------|-Bottom
|-------------------------------|-Picure

And I want the Middle Picture to repeat when you cant fit any more in the bottom pic, while the top pic is fixed. Do you understand?

This is what it would look like if you added more text.
[BANNER]
|-------------------------------|- TOP
| TEXT HERE--------------------|- Picture
| TEXT HERE--------------------|
| TEXT HERE--------------------|- Middle
| TEXT HERE--------------------|-Picture
| TEXT HERE--------------------|- Middle
| TEXT HERE--------------------|-Picture
| TEXT HERE--------------------|
| TEXT HERE--------------------|-Bottom
|-------------------------------|-Picure
Sorry this sounda confusing..:banghead:

 

[mase]

http://www.w3schools.com/css/pr_background-repeat.asp

 

[-=Swift=-]

Lol

I know that stuff, but i want to know how to seperate the three pictures into 3 seperet centered backrgrounds and only repeat the center. And i wanted to know how to get the text to folow through all three backrounds.

 

[phyrex1an]

Only way in current browsers is to use 3 different tags and have one background in each.

For example:

<div id="container">
  <div>
    <div>
       <!-- Content here -->
    </div>
  </div>
</div>

css

#container{
    background: transparent url('toppicture') no-repeat top center;
}
#container > div{
    background: transparent url('middlepicture') repeat-y center center;
}
#container > div > div{
    background:transparent url('bottompicture') no-repeat bottom center;
}

The > selector is not supported by IE < IE7 so you should probably use something else to select to child divs, a class for example.

 

[-=Swift=-]

thanks!