HTML - Can Some1 Help Me

i've been using this code for a while now and just realized when i a friend told me that it doesnt work in firefox only IE... does any1 know a way i can fit this image to the whole page its a background

header::

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Imagetoolbar" content="no">

<style type="text/css">
/* pushes the page to the full capacity of the viewing area */
html {height:100%;}
body {height:100%; margin:0; padding:0;}
/* prepares the background image to full capacity of the viewing area */
#bg {position:fixed; top:0; left:0; width:100%; height:100%; allowtransparency="true";}
/* places the content ontop of the background image */
#content {position:relative; z-index:1;}
</style>
<!--[if IE 6]>
<style type="text/css">
/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}
</style>
<![endif]-->

call ::
<div id="bg"><img src="background.gif" width="100%" height="100%" alt=""></div>
<div id="content">

i have to put the last </div> @ the end of my page so the contect shows in IE, theres gotta be a easier way to do this... i tried the <background ="background.gif" style="width=100%; height=100%";> no luck with that didnt work in either browser... if any1 can help me thank you