Div background is not showing up

So i have run into a problem

i am making a website and i have my top navigation working ( i know its not the best coding in the world, but it works )

Ohh, and i should mention that i am using html5 and css3

Okay so after the navigation i am trying to have a box where i can put a video.
But for some reason the background is not showing up

Any ideas, i need help !!

CSS

@charset "UTF-8";
/* CSS Document */

* { margin: 0; padding: 0; }

html {
background: url(brink-background.jpg) repeat-x center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

#vertalign { vertical-align:middle; }


#whole_body {
margin:0 auto;
width:925px;
height:1000px;
overflow:hidden;
}

#top-container {

height:100px;
width:9px;
margin-top:20px;
margin-left:5px;


}

#logo {

float:left;
height:100px;
width:auto;
}

#navigation { font-family:Verdana, Geneva, sans-serif;

width:925px;
height:60px;
margin:0 auto;


}

#nav-left { -moz-border-radius-topleft: 19px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:19px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
border-top-left-radius:19px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;

background-color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.7);
color: rgba(255, 255, 255, 0.7);

height:60px;
width:150px;
float:left;

margin-left:5px;
}

#nav-left:hover { -moz-border-radius-topleft: 19px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:19px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
border-top-left-radius:19px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;

background-color: rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.9);
color: rgba(255, 255, 255, 0.9);

height:60px;
width:150px;
float:left;
margin-left:5px;


}

#nav-right { -moz-border-radius-topleft: 19px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:19px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
border-top-left-radius:0px;
border-top-right-radius:19px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;

background-color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.7);
color: rgba(255, 255, 255, 0.7);

height:60px;
width:150px;
float:left;
margin-right:5px;
}

#nav-right:hover { -moz-border-radius-topleft: 19px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:19px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
border-top-left-radius:0px;
border-top-right-radius:19px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;

background-color: rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.9);
color: rgba(255, 255, 255, 0.9);

height:60px;
width:150px;
float:left;
margin-right:5px;


}

#nav-all {


background-color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.7);
color: rgba(255, 255, 255, 0.7);

height:60px;
width:150px;
float:left;

}

#nav-all:hover {


background-color: rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.9);
color: rgba(255, 255, 255, 0.9);

height:60px;
width:150px;
float:left;

}

#nav-left h1 {color:#000; font-size:18px; left:50%; top:50%; text-decoration:none;

}




#nav-text {
top:50%;
left:50%; width:140; height:55; color:#000; font-size:12px; text-decoration:none; margin-top:40px; text-align:center; float:left; margin-left:10px; font: 12px "Molengo", Verdana, sans-serif;

}

#inbetween { background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#999999), to(#ffffff)); width:3px; height:60px;float:left; opacity: 0.8;

@font-face {
font-family: 'Molengo';
font-style: normal;
font-weight: normal;
src: local('Molengo'), url('http://playground.html5rocks.com/samples/html5_misc/Molengo.ttf') format('truetype');
}

#video {

height:310px; width:918px; background:url(mid.jpg) repeat-x; margin-left:3px; margin-right:4px; float:left;


}

#video-left {

height:300px; width:300px; margin-top:5px; margin-left:5px; float:left;

}

#mid {

float:left;
width:918px;
margin-left:3px;
background-color:#CC0;


}









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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Game</title>
</head>

<body>


<div id="whole_body">
<div id="top-container">
<div id="logo">
<img src="logo.png" width="363" height="94" />
</div>
</div>

<div id="navigation">

<div id="nav-left" onclick="index.html" style="cursor:pointer;">
<div id="nav-text">Home</div>
</div>
<div id="inbetween"></div>
<div id="nav-all" onclick="index.html" style="cursor:pointer;">
<div id="nav-text">About the game </div>
</div>

<div id="inbetween"></div>
<div id="nav-all" onclick="index.html" style="cursor:pointer;">
<div id="nav-text">Programming </div>
</div>

<div id="inbetween"></div>
<div id="nav-all" onclick="index.html" style="cursor:pointer;">
<div id="nav-text">Modeling </div>
</div>

<div id="inbetween"></div>
<div id="nav-all" onclick="index.html" style="cursor:pointer;">
<div id="nav-text">About Us </div>
</div>
<div id="inbetween"></div>
<div id="nav-right" onclick="index.html" style="cursor:pointer;">
<div id="nav-text">Contact</div>
</div>



</div>

<div id="video">
<div id="video-left">

</div>
</div>

<div id="mid"> </div>

</div>



</body>

</html>



Thanks

is mid.jpg in the right directory or uploaded? got a link?

Yes, i just have it in a folder. Everything is in the correct spot, i have even tried it without a picture, and just using a background colour, and it still doesnt work.

background:url(mid.jpg) should be, background:url('mid.jpg')

background:url(mid.jpg) should be, background:url('mid.jpg')

its doesnt technically need the ' ' around the image. Give us a url to work with.

you can see it at http://armstrongwebandgraphic.com/test/

css is just http://armstrongwebandgraphic.com/test/style.css

Validator (http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Farmstrongwebandgraphic.com%2Ftest%2F) is your friend!
You are missing a } at the end of#inbetween { background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#999999), to(#ffffff)); width:3px; height:60px;float:left; opacity: 0.8;

Validator (http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Farmstrongwebandgraphic.com%2Ftest%2F) is your friend!
You are missing a } at the end of#inbetween { background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#999999), to(#ffffff)); width:3px; height:60px;float:left; opacity: 0.8;
OHh thank god
Thank you so much abduraooft
You really are a supreme Master Coder ! :)
Thanks for the help and time.
And thank you everyone else who was helping.