Io personalmente utilizzerei un altro approccio; io te lo espongo, poi decidi tu se seguirlo o no, ci mancherebbe.

Elenco una serie di modifiche, fai una copia di backup del tuo lavoro poi segui le modifiche, e dimmi se ti piace ugualmente oppure no:

1) Togliere la dicitura "background-image" da "body" ( quindi anche "background-position" che ora è inutile)
2) Aggiungi in body:
codice:
body{
   ...
   background-color: silver;
   margin: 0;
}
3) Aggiungi in container
codice:
#container{
   ...
   background-color: white;
   padding-top: 8px;
Ecco fatto. Ripeto, è solo un'opinione, magari avrai avuto le tue ragioni per fare così.

Il tuo problema è che come tu rimpicciolisci la finestra, il fuoco del centro si sposta verso sinistra, perciò anche l'immagine di sfondo si sposterà a sua volta, in modo da posizionare le scritte sul grigio, tutto ciò perché hai centrato lo sfondo (come ha giustamente detto fcaldera).
Nel modo che ti ho illustrato non costringi al caricamento dell'immagine di sfondo e non hai il problema di lato. L'unico neo è che in altezza dovrai dichiarare l'altezza con "height" dal momento che l'altezza dei float non viene considerata nel computo dell'altezza del div padre, cosicché le scritte vadano a finire nel nulla.


Infine in alternativa, se sei smaliziato e vuoi soluzioni rapide benché non perfette
puoi sempre decidere di aggiungere un
codice:
body{
   ...
   background-attachment: fixed;
}
per evitare che salti fuori il grigio scuro quando scrolli in orizzontale ( ma ti consiglio la mia comunque ).

PS: la soluzione con immagine dietro sarà soggetta ad errori anche quando visualizzerai la pagina su di un schermo wide 16:9, cioé anche in caso contrario (dallo stringere allo allargare)

buona fortuna
hth
ciauz