http://www.renaultsamsungm.com/main/index.jsp

위 사이트와 같은 가운데 정렬에 양쪽 세로 라인모양으로 레이아웃을 잡고 있습니다.

1주일 정도 css 공부하고 몇일째  연결되어 있는 수많은 css를 아무리 봐도 잘 모르겠네요.

검색을 해도 대부분 가운데 정렬에 배경 이미지 넣는 방법밖에 찾을수 없어 질문 드립니다.

위 이미지에 빨간색으로 테두리 한 부분에 만들어 놓은  .gif를 배경으로 넣기를 원합니다.

그라데이션 방향이 서로 달라 파일을 2개 만들어 놨는데 css 이용하면 파일 1개로

가능한거 같다는 생각도 드는데 몇일 동안 검색하고 찾아봐도 도통 감이 안오네요 ㅡㅡ;;

아래는 html 소스구요.

===========================================================================

<!--%import("css/ink.css")-->
<!--%import("css/framework.css")-->
<!--%import("js/flash.js")-->

<div id="xe" class="fixed"><div id="container" class="ce">
<div id="header"><a href="/main"><img src="./images/logo.png" /></a></div>
<div id="body"><div align="center"><img src="./images/roll_img.png" /></div>
<div class="after1"><script language="JavaScript">playflash("./files/faceOff/227/images/sub_navi.swf","1024","57","high","sub_navi")</script></div>
<div id="footer"><img src="./images/copyright.png" />
<div class="after2"><img src="./images/rss.png" />             <img src="./images/twitter.png" /></div>

===========================================================================

이건 css 입니다.

===========================================================================

@charset "utf-8";

body {
 background-color: #2b2e31;
}

/* comm */

#header {
   border: 0px solid #666;
 margin: 0 0 0 0;
 padding: 46px 0 0 30px;
 }

#body {
    border: 0px solid #666;
 margin: 0 0 0 0;
 padding: 43px 0 0 0;
 }

.after1{
 border: 0px solid #666;
 margin: 40px 0 0 0;
 }

#footer {
 border: 0px solid #666;
 margin: 0 0 0 0;
 padding: 141px 0px 15px 617px;
    }
 
.after2{
 border: 0px solid #666;
 margin: 10px 0 0 0;
 }

/* Layout Width */
#container{
    width:1024px;
 margin-left:auto;
    margin-right:auto;
 background-color: #1f1f1f;
 }
 
 ===========================================================================

구해주세요ㅜㅜ