CSS Background Image Help

Hi I’m pretty new to CSS and I’m only familiar with DIV positioning etc.

The thing is i wish to split a background on the left and right. Something like this :- http://www.marcliu.com/commerce/store/index.asp

I’m using 2 different DIV tags on the left and right. But I’m sure thats not the correct way of doing it. Any ideas on how should I do this? The problem is that if the content in the center page exceeds the background height, the background doesnt automatically increase in length, which is what I wish to achieve.

Any help is appreciated thanks!

CSS Code : -


BODY
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

#backgroundleft
{
position:absolute;
background-image: url(images/bkg.gif);
width: 111px;
height: 505px;
top: 0px;
left: 0px;
}

#backgroundright
{
position:absolute;
background-image: url(images/bkg.gif);
width: 120px;
height: 505px;
top: 0px;
left: 891px;
}