come posso fare la barra nera 'infinita' alla destra e alla sinistra del mio sito?

ho postato uno screenshot, tutto il sito e' dentro il div 'contenitor'

pensavo di mettere una barretta nera come background e ripeterla solo in x ma non mi funziona.

codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="Images/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Wango</title>
<style type="text/css">
body {
	background-color: #d1d1d1;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	IMG {border:0; 	background-color: #d1d1d1;
	margin-left: 0px;	
						}
}
td { vertical-align: top; }
a:visited {
	color: #FFF;

	}
body{text-align: center}   /* centra in IE5.x */
div#container{ width: 931px;
    margin: 0 auto;   /* centra negli altri browser */
    text-align: left;   /* ripristina l'allineamento */ 
	}
	
	{
background-image:url('images/background.gif');
background-repeat:repeat-x;
background-position:left top;
}

</style>
<script type="text/javascript">
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
</script>

</head>
<body>
<div id="container">
<table width="0" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><table id="Table_01" width="634" height="919" border="0" cellpadding="0" cellspacing="0" bgcolor=#FFFFFF>
	<tr>
		<td>
			[img]images/logo.gif[/img]


			[img]images/reel.gif[/img]

            
            [img]images/video.gif[/img]
         
		</td>
</tr>
</table></td>
    <td><table id="Table_02" width="297" height="919" border="0" cellpadding="0" cellspacing="0" bgcolor=#FFFFFF>
		<td>
			[img]images/head-02.gif[/img]

			[img]images/text.gif[/img]

			[img]images/email.gif[/img]
       </td>
	</tr>
</table></td>
  </tr>
</table>
</div>
</body>

</html>