Need help with border height

[altious]

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



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



What can I do to make it like this:



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

[jcdevelopment]

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

see what happens when you do that!

[altious]

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



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

[jcdevelopment]

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!!

[altious]

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