ho fatto questa pagina e lo sfondo dovrebbe essere una sfumatura verticale, peccato che non riesca a visualizzarlo. ho sbagliato qualcosa nei css o nell'html o non è proprio possibile avere uno sfondo sfrumato?

pagina
codice:
<html>

<head>
	<title>ClouD - Spremute di Idee...</title>
	<link href="/Lib/Main.css" rel="stylesheet" type="text/css">
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

	<div id="Header" align="center" class="BODY">
		
		<TABLE ALIGN="center" WIDTH="860" HEIGHT="250" CELLSPACING="0" CELLPADDING="0" BORDER="0">
			<TR>
			    <TD style="Width : 305px; Height : 250px;" ROWSPAN="2" valign="top">[img]Images/lgHeaderSX.jpg[/img]</TD>
			    <TD style="Width : 555px; Height : 171px;" background="Images/SfHeaderFoto.jpg" valign="top">[img]Images/header/HeaderFoto_02a.jpg[/img]</TD>
			</TR>
			<TR>
			    <td style="Width : 555px; Height : 79px;" valign="top">[img]Images/sfHeaderDX.jpg[/img]</td>
			</TR>
		</TABLE>
	</div>

	<div align="center"></div>

	<div id="Footer"></div>
	
</body>

</html>
CSS

codice:
BODY {
	BACKGROUND-POSITION: 50% top; BACKGROUND-IMAGE: url(/Images/sfumatura.jpg); BACKGROUND-REPEAT: repeat-x; BACKGROUND-COLOR: #6E4F23
}
TD {
	FONT-SIZE: 10px; FONT-FAMILY: Verdana
}
A {
	FONT-SIZE: 10px; COLOR: #0066ff; FONT-FAMILY: Verdana; TEXT-DECORATION: underline
}
A:hover {
	TEXT-DECORATION: none
}