hi there guys just picking this up so be kind to me lol

what i am trying to is simple i have a image that i would like to use for my background and have included it to the css body tag.. i want it to fill 100% width and height of the site so that it fills the page and will do so on different sizes like 800x 600 1024x768 etc etc and i seem to be hitting a bit of a wall what am i doing wrong?

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />

<title>Untitled Document</title>

</head>

<body>
<!-- start wrapper-->
<div id="wrapper">
<img src="images/mfoam_logo.png" width="220" height="92" alt="logo" />
<!-- wrapper ends-->
</div>
</body>
</html>

CSS

#wrapper
{
margin: 0 auto;
}

body {
background-image: url(images/wave-background.gif);
background-repeat: no-repeat;
background-size: 100%;
}