Need help with border height

I need help with this border
First I have an image like this:

http://altious899.googlepages.com/background_border.gif

It works perfect if my content height does not exceed my image height
However this is what happen if it exceed:

http://altious899.googlepages.com/help1.JPG

What can I do to make it like this:

http://altious899.googlepages.com/howtobecomethis.JPG

My CSS is:

DIV#border {float:left; width:1003px; background:url(images/background_border.gif) no-repeat; }

Hope someone can help me with this. Thanks

DIV#border {float:left; width:1003px; background:url(images/background_border.gif) repeat-y; }



see what happens when you do that!

Thanks for the reply
After I did that it became like this:

http://altious899.googlepages.com/itbecame.JPG

Is there a way to not show the top part of my image and only show the below part of my image for the rest of the document if I exceed the height

I only want this part to repeat

http://altious899.googlepages.com/bordertobe.JPG

well you need to grab a gif or jpg of a middle section and set the main content to that picture, like so


#topBorder {
height:/*pic height*/
width:/*pic width*/
background-image:url(path/image.gif) no-repeat;
}
#middleBorder {
height:/*whatever you need*/
width:/*pic width*/
background-image:url(path/image.gif) repeat-y;
}
#bottomBorder{
height:/*pic height*/
width:/*pic width*/
background-image:url(path/image.gif) no-repeat;
}



then place it in the html, however big the middle gets, it will keep repeating with content.

If you need anymore help, let me know!!

Thanks for the fast reply!
It works perfectly now :thumbsup:
appreciate the help~