Innanzitutto riporto di seguito il codice semplicissimo.

codice:
html, body {
margin: 0px;
padding: 0px;
background: url(../img/bg.jpg) #fffff3;
background-repeat: repeat-x;
font-family: Tahoma;
}

div#container {
background-color: #fffff3;
border: 10px solid #f3f3d7;
width: 800px;
height: 10px;
margin-right: auto;
margin-left: auto;
}
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
 <head>
  <title>Andrea HomePage</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <meta name="description" content="HTML.it - corsi, guide, articoli e script per webmaster e webdesigner" />
  <meta name="keywords" content="webmaster php javascript asp html" />
  <link rel="stylesheet" type="text/css" href="css/home.css" />
 </head>
 <body>
  <div id="container">
  </div>
 </body>
</html>
Lo sfondo è semplicissimo; è una striscia rosso (un'immagine alta 132px) che si ripete orizzontalmente. Il problema sorge quando sopra di essa, che costituisce lo sfondo del sito, io voglio mettere effettivamente il contenuto della pagina web, ovvero un div "container" centrato che copre la striscia nella parte centrale del sito, perchè mi taglia l'immagine e non me la fa vedere bene.

Posto due esempi:
Come lo vorrei:
http://img822.imageshack.us/i/10834093.jpg/

Come effettivamente si vede:
http://img822.imageshack.us/i/38841798.jpg/

Il problema è che se aggiungo il margin e ne metto poco, mi taglia l'immagine di sfondo; se ne aggiungo tanto mi abbassa l'immagine di sfondo di 132px (ovvero ripete, senza farla rivedere, due volte l'immagine bg.jpg)

Soluzioni?