z-index로 순위를 정해주셔야할듯...

div#site_left_img
{
width:43px;
height:244px;
float:left;
background-image:url(/joycity/images/left_img.jpg);
background-repeat:no-repeat;
}
이부분에 background-repeat: repeat; 로 함 해보세요

height:100% 의 문제 입니다.

html, body
{
font-size: 9pt;
overflow-x: auto;
margin: 0 auto;
padding:0;
background-image: url(/joycity/images/background.gif);
font-size: 9pt;
text-align: center;
height:100%;
}

div{margin-right:auto; margin-left:auto;}
div#site_wrap
{
text-align:center;
width: 826px;
height:100%;
}
div#site_left
{
position:relative;
width: 43px;
height:100%;
float:left; background-image:url(/joycity/images/left_bg.jpg);
}
div#site_center
{
position:relative;
width: 750px;
height:100%;
float:left;
background-color:white;
}
div#site_right
{
position:relative;
width: 33px;
height:100%;
float:left;
background-image:url(/joycity/images/right_bg.jpg);
}


여기서 100%가 문제 입니다.

익스플로러는 높이를 정해 놓아도 내용이 늘어나면 자연스레 div크기가 늘어나지만..
파폭이나 기타 브라우저는 딱 정해진 크기만 보여주거든요..
그러니까 100%라고 정해버리면 브라우저 창 크기만큼만 늘어나고.. 스크롤이 생기거나 하면 배경이 늘어나지 못합니다.

테이블로 홈페이지 레이아웃을 디자인하면 이런일이 없는 이유는..
파폭이든 기타브라우저든 테이블은 높이를 정해 놓아도 내용이 늘어나면 모든브라우저에서 셀 크기를 늘려버리거든요..


이것의 해결 방법은 여러가지가 있는데요...
우선 height:100% 를 없애는것이 가장우선입니다.
100% 를 없애면 화면 내용이 다 안차는 페이지는 배경이 모두 체워지지 않을 겁니다.
그러면 디자인을 페이지 하단 디자인을 줘서 페이지가 다 안차도 어색하지 않게 하는 방법이 가장 무난합니다.

아니면 100%를 모두 없애고
min-height:100%로 해보는 방법도 좋겠습니다.

물론 익스플로러 핵을 사용해서

아래에
 * html html {height:100%;}
 * html body {height:100%;}
등등 min-height 한 부분은 모두 이렇게 익스 핵을 써서 익스플로러도 잘 동작하도록 만들어야 합니다. min-height 는 익스에서는 동작을 하지 않으니까요..


이렇게 하면 익스플로러 말고 다른 브라우저에서는 최소 높이가 100%로 되고 페이지 내용기 길어져 스크롤이 생겨도 div는 자연스레 길어져.. 배경이 잘리거나 하는 일은 없어질것 같습니다.

저도 완벽히 테스트는 안해봐서 정확히 되는지는 모르겠네요..^^;;

안되시면 연락주세요^^