How can I do a Background image like this (example inside)

[BlackReefDesign]

Check this out:

http://www.foxhead.com/us/blog/?id=16372

Notice if you view the background image by itself, its much bigger than what is appearing on the website in the browser. Is it set to automatically adjust to your monitor size? How can I achieve this through CSS?

Also, how can I setup a transparent background (like in the middle of the page?)

Thanks

[toenailsin]

background-attachment: fixed; // prevent background from scrolling
background-position: top center; // center the image, trimming off the sides

[BlackReefDesign]

background-attachment: fixed; // prevent background from scrolling
background-position: top center; // center the image, trimming off the sides

Thank you for the response. Somethings not right though. Im pretty new to CSS, here is what my code looks like right now

<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
margin: 0;
}
mainCell {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
background-attachment: fixed;
background-position: top center;
margin: 0;
}
body {
background-color: #000000;
background-image: url(background.jpg);
}
a {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FF0000;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FF0000;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #FF0000;
}
</style></head>
<mainCell>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="smallbusinesslogo.png" width="384" height="56" /></td>
<tr>
<td height="800" align="left" valign="top" bgcolor="#000000">&nbsp;</td>
</table>
</body>
</html>