Posizione errata immagine di sfondo

[capsula]

Ciao a tutti.. dovrei fare una pagina con un'immagine di sfondo sfumata di dimensioni 5x800 (da nero in alto a bianco in basso).
Vorrei che l'immagine sia posizionata a partire dal fondo della pagina, poichè dovendo avere il colore nero come sfondo avrei la sfumatura giusto a fine pagina.
Altrimenti con una pagina "lunga" mi sfumerebbe molto in alto e non va bene....

il codice che ho usato è il seguente e non capisco perchè non funzioni e l'immagine sia posizionata in alto!

body {
	background: #FFF url(../images/sfondo.gif) repeat-x bottom;
}

Se vi può essere utile posto anche tutto il css e xhtml

* {
	margin: 0;
	padding: 0;
}
html, body { height: 100%; }
body {
	background: #FFF url(../images/sfondo.gif) repeat-x bottom;
	text-align: center; /* allineamento centrale, per IE */
}
#container {
	width: 80%;
	margin: 3% auto; /* allineamento centrale, per FF */
	border: 2px dashed #00F;
	background: #FFF;
	text-align: left;
}
#header {
	clear: both;
	border-bottom: 1px solid #000;
	background: #F90;
}
	#advert1 {
		width: 35%;
		background: #CC0;
	}
#wrapper { 
	float: left; 
	width: 69%;
	border: 1px solid #666;
	/*background: #6F9;*/
}
	#content {
		margin: 0px;
		border: 1px solid #666;
	}
		#banner {
			clear: both;
			border: 1px solid #666;
		}

		#user1 {
			clear: both;
			border: 1px solid #666;
		}
		#user2 {
			float: left;
			width: 49%;
			border: 1px solid #666;
		}
		#user3 {
			float: right;
			width: 49%;
			border: 1px solid #666;
		}
		#mainbody {
			clear: both;
			border: 1px solid #666;
		}

		#user4 {
			clear: both;
			border: 1px solid #666;
		}
#navigation {
	float: left; 
	width: 29%;
	border: 1px solid #666;
}
#footer {
	clear: both; 
	border-top: 1px solid #000;
	background: #999;
}


<div id="container"> 
	<div id="header"> 
		<div id="advert1"> advertising 1 </div>
		header 
	</div>
	<div id="navigation"> navigazione </div> 
	<div id="wrapper"> 
		<div id="content"> 
			<div id="banner"> banner principale </div>
			<div id="user1"> user 1: evento della settimana </div>
			<div id="user2"> user 2: ultime forum </div>
			<div id="user3"> user 3: annunci </div>
			<div id="mainbody"> parte centrale </div>
			<div id="user4"> user 4: slideshow </div>
		</div>
	</div>
	<div id="footer"> footer </div>
</div>

Grazie a tutti