questo è il mio codice html

codice:
?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>work in progress..</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="all" />
<link rel="shortcut icon" href="favicon.ico" type="image/png" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="js/jquery.pngFix.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
        $(document).pngFix(); 
    }); 
</script> 
</head>
<body>
<div id="info">
</div>
</body>
</html>
questo è il relativo foglio di stile

codice:
/*
** style.css 
*/

body,html {  background: #fff url(img/background.jpg) no-repeat; height:100%; margin:0; }

#info {
    width: 550px; height: 350px;
    background: url(img/bubble.png) no-repeat;
    position: absolute; top:50%; left:50%;
    margin: -275px 0 0 -175px;
}
l'immagine nel div, non viene centrata nella pagina? dove sbaglio?

grazie
@lessia