I tuoi post aprono varie problematiche. Provo ad affrontarle una alla volta (se ci riesco).

Anzitutto se usi position e z-index ti metti nella "zona grigia": occorre molta esperienza e un po' di fortuna perche` funzioni in tutti i browser.
A mio parere conviene "dimenticare" l'attributo position.

Riassumendo, mi par di capire che vuoi un sito centrato; quello che "avanza" rispetto al sito (a destra e a sin) vuoi che abbia due colori diversi.
Poi aggiungi che hai fatto due immagini 1x300, ma non specifichi se sono in verticale o orizzontale (dall'ordine 1x300 direi che sono orizzontali); pero` poi vorresti espanderle facendo un 2x300 (che presupporrebbe che il 300 sia vert), ed a questo punto non ci capisco piu`.
Ma queste immagini hanno delle sfumature o sono dei colori fissi?

Se sono dei colori fissi, dimenticando quanto hai scritto (e che non ho capito), per realizzare i bordi dicolore diverso, ti basta avere una immagine alta 1 px e larga quanto vuoi (diciamo 2000px, ma puo` essere anche di piu`), con circa meta` di un colore e meta` dell'altro; la posizioni nel body, la fai ripetere in verticale e la centri in orizzontale:
background: url(duesfondi.gif) repeat-y top center;


Gli sfondi non possono venir estesi, come si fa con le immagini del tag <img>


Per centrare un oggetto nel body, occorre:
codice:
html, body {
  text-align: center;     /* per far contento IE6 */
}
#wrapper {
  text-align: left;          /* o quello che vuoi */
  margin: 0 auto;        /* per i browser standard */
  ...
}
Nota: un sito largo 960 e` molto largo: in molti browser non ci sta. Molte persone che hanno un browser largo, tengono il browser in una finestra (cosi` possono controllare altre finestre in contemporanea).
Dovresti usare un layout fluido, che si adatta alla finestra, e con un max-width di 960, se questa e` la larghezza max che ritieni adatta al tuo sito.