Mantenere un box fisso con sfondo scorrevole

[Wanker]

Salve a tutti

Sono un novizio della programmazione di siti web, e ho un problema che non riesco a risolvere.

Il mio intento sarebbe quello di creare un layout su background fisso composto da una box e il menù.
Ho scaricato un template e ho cominciato ad adattarlo arrivando a questo risultato http://www.dittafaraoni.altervista.org/sito/index.html

Dento a questo box avrei intenzione di fare due file da 3 immagini più il logo che porteranno alle varie sezioni.
Il problema principale è che non riesco ad impedire che visualizzandolo con differenti risoluzioni, mi si stiri anche il box e tutto il suo contenuto.

C'è un modo per mantenere il box e quello che contiene FISSO e centrato e lasciare allargare solo lo sfondo?


Questo è il CSS

body {
	font-family: arial, verdana, sans-serif;
	font-size: 10px;
	color: #fff;
	background-image: url(images/Background2.jpg);
	background-repeat: repeat;
}
#box {
	width: 900px;
	height: 600px;
	margin: auto;
}

#nav {
width:900px;
height:44px;
background-color:#333;
opacity:0.7;
margin:-26px auto;

}
#nav #logo {
display:inline;
float:left;
}
#nav #logo h1 {
padding:0;
margin: 14px 0 0 10px;
font-size:13px;
color:#FFFFFF;
text-transform:uppercase;
}
#nav #logo h1 a{
color:#FFFFFF;
text-decoration:none;
}
#nav #logo h1 span{
color:#999;
}
#nav #menu {
display:inline;
float:left;
}
#nav #menu ul{
padding:0;
margin:25px 10px 0 0;
font-size:12px;
}
#nav #menu ul li{
list-style-type:none;
display:inline;
font-weight:bolder;
margin-left: 10px;
text-transform:uppercase;
}
#nav #menu ul li a{
text-decoration:none;
color:#FFFFFF;
}
#nav #menu ul li a:hover{
	color: #FFFFFF;
	font-style: italic;
	font-weight: bold;
}
#main_img {
width:900px;
height:600px;
background-image:url(images/main2_img.jpg);
background-repeat:no-repeat;
margin:0 auto;
}

#logo{
width:300px;
height:160px;
position:absolute;
top:50%;
left:50%;
margin-left:-150px;
margin-top: -400px;
padding:0;
 }
	


#main_text h2 {
margin:0;
padding:0;
color:#CCCCCC;
font-size:14px;
}
#footer {
text-align:center;
color:#333;
clear:both;
}
#footer a{
text-decoration:none;
color:#333;
}

[lollo10!]

Non ho capito precisamente quale sia il problema.
Visitando il sito, ho notato che l'unica cosa "strana" è che il logo centrale cambia di posizione in base alla grandezza della finestra.
Questo accade perchè gli hai messo position:absolute, se vuoi riferire la posizione del logo al box principale e non alla finestra intera, devi inserire nel css del box "position:relative".

Se non è questo il problema spiega meglio