div background image not showing

hello. so i have this website. i am trying to set a background image for a div. but the image is not showing.
however if i take out

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

from the html page. it works in ie but not in firefox. can someone please help? thank you

css:


#main
{
 position: absolute;
 left: 0px;
 top: 0px;
 width: 102%;
 height: 799px;
 background-color: transparent;
 background-image: url(images/bodybg.jpg);
 background-attachment: fixed;
 background-repeat:repeat-x;
}
#logo
{
 position:absolute;
 top:0px;
 left:0px;
 width:344px;
 height:144px;
}
#headerright
{
 position:absolute;
 top:0px;
 left:344px;
 height:144px;
 width:460px;
 background-image:url('images\headerright.jpg');
 background-repeat:no-repeat;}
#header
{
 position:relative;
 height: 144px;
 width:800px;
}

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>
 <title>Nanirx_main</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <link href="main.css" rel="stylesheet" type="text/css" />
 <style type="text/css">
 #Button1
 {
  height: 141px;
  width: 451px;
 }
 </style>
</head>
<body>
 <center>
 <div id="main">
 <div id="header">
  <div id="logo">
  <img alt="" src="images\logo.jpg" />
  </div>
  <div id="headerright">
  
  </div>
  </div>
 </div>
 </center>
</body>
</html>

div background image not showing

dexxa

Xapti

dexxa

dexxa

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week