Background not displaying on body(checked for answers)

HTML & CSS
1

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

#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

<!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 :(.

2

Nah, wrong approach. Add it as an actual background image, via CSS. These days, you can set the image to cover the visible area easily. E.g.

body {
background-image: url(blue.png);
background-size: cover;
}

There are other options, if that doesn’t suit, such as

background-size: 100% 100%;
3

Hey man thanks a lot that worked. Its pretty stupid that I have to create a white background image though. Hehe

4

Yes, no doubt there was a better way to get the result you wanted.

5

Ye lol. I wonder if you can also help me with my background image. I want it to extend so that the bottom is always touching the bottom of the window. Even if that means it cuts off some of the width. Because right now it displays a white strip at the bottom.

Here is my code :

#bg{
width: 100%;
height:100%;
min-width:1000px;
min-height: 750px;
position: absolute;
top: 0;
left: 0;
}

6

That’s what I was talking about above:

body {
background-image: url(blue.png);
background-size: cover;
}
7

Oh lol I was talking about my content not body but that worked also lol thanks man much appreciated