Hi all,

I am trying to add a whote background to my body but it either is not appearing or it messes with the content.

Code

CSS
HTML Code:
#wrap{ 
	width: 964px;
	margin: auto; 
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -40px;
	
	
	
	
}
#bg
{
	
	position: absolute; 
	top: 0; 
	left: 0; 
	min-width: 100%;
	min-height: 100%;
	background :no-repeat;

}
div.header_main{
	display : block;
	position:relative;
	padding : 2em;
	text-align : center;
	width: 850px;
	min-width:850px;
	max-width:850px;
	height: 100px;
	margin-left:auto;
	margin-right:auto;
	



}
div.left_bar{

	
	display : block;
	position:relative;
	width: 385.6px;
	min-width:386px;
	max-width:386px;
	height : 80px;
	margin-left:250px auto;
	float: left;
	
	
	
}
div.middle_bar{

	
	display : block;
	position:relative;
	width: 192px;
	min-width:192px;
	max-width:192px;
	height : 80px;
	float : left;
	

}
div.right_bar{

	
	display : block;
	position:relative;
	width: 386px;
	min-width:386px;
	max-width:386px;
	height : 80px;
	float : left;
	
	
	
}
div.left_panel{
	
	
	display : block;
	float : left;
	position: relative;
	width:44px;
	height:600px;
	margin-left:250px auto;
	border-left:ridge;
	border-width:5px;
	border-color: rgb(100,149,237);
	
	
}
div.right_panel{
	
	display : block;
	float : right;
	position: relative;
	width:44px;
	height:600px;
	margin-right:200px auto;
	border-right:ridge;
	border-width:5px;
	border-color: rgb(100,149,237);
	
	
}
div.footer_bar{

	
	
	width: 964px;
	position:relative;
	min-width:964px;
	max-width:964px;
	height : 40px;
	
}
div.window
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 680px;
	height:400px;
	background-color:rgb(255,255,255);






}
div.windows
{
	
	border-style:outset;
	width: 130px;
	height:400px;
	float:left;
	position :relative;
}




div.border
{


	border-style:solid;
	border-width:3px;
	border-color: rgb(0,0,0);
	border-width:25px 25px 25px 25px;
	-moz-border-image:url("b1.png") 30 30 30 30 Stretch stretch;
	-webkit-border-image:url("b1.png") 30 30 30 30 Stretch stretch;
	border-image:url("b1.png") 30 30 30 30 Stretch stretch;

}
p.content
{
	display : block;
	width: 850px;
	min-width:850px;
	max-width:850px;
	text-align: center;
	
	
}
div.body{
	
	background-color : rgba(255,255,255,0);
	position : fixed;
	background-size : 100%;



}

HTML
HTML Code:
<!DOCTYPE HTML>
		<html xmlns="http://www.w3.org/1999/xhtml">


		<head>
		
		<meta charset="UTF-8">
		<link href="general.css" rel="stylesheet" type="text/css">
		<title>TEMP NAME</title>
		<img src="blue.png" id="bg" alt=""> 
		<div class="header_main">
		
		Logo and heading(Picture) animated
		</div>
		</head>
		
		<body id="wrap">
		<div class="whole">
		<div class="left_bar">
		<img src="left_bar.png" alt="Left Bar"></img>
		</div>
		<div class="middle_bar">
		<img src="middle_bar.png" alt="Middle Bar"></img>
		</div>
		<div class="right_bar">
		<img src="right_bar.png" alt="Right Bar"></img>
		</div>
		<div class="left_panel">
		
		</div>
		<div class="right_panel">
		
		</div>
		
		
		
		<div class="window">
		
		<div class="windows">
		<embed src="test.mov" width="130" height="400" controller="false" autostart="true" loop="true" >
		</div>
		<div class="windows">
		<embed src="test.mov" width="130" height="400" controller="false" autostart="true" loop="true" >
		</div>
		<div class="windows">
		<embed src="test.mov" width="130" height="400" controller="false" autostart="true" loop="true" >
		</div>
		<div class="windows">
		<embed src="test.mov" width="130" height="400" controller="false" autostart="true" loop="true" >
		</div>
		<div class="windows">
		<embed src="test.mov" width="130" height="400" controller="false" autostart="true" loop="true" >
		</div>
		</div>
		
		<p class="content">
		asdsadadsfafasdf
		
		</p>
		
		
		
		</div>
		
		</body>
		
		
		</html>


I have been trying to find solutions for hours now but i cant even find a problem. Please help. Also my p.content tag is not appearing underneath my windows. Dont know what to do about that either .