css div positioned absolute not expanding all the way to the bottom

css div positioned absolute not expanding all the way to the bottom

I am trying to use a absolute div as my background (only on certain
pages..I can not use body for this purpose)
However I am not able to expand it to the bottom of page. Pleas help.
Black background is only to the middle of page. Notice in my fiddle
http://jsfiddle.net/z9Unk/317/
CSS
.background {
position:absolute;
width: 100%;
height: 100%;
z-index:-1;
background:black;
}
.container {
height: 100%;
width:100%;
}
.item {
width:100px;
height:100px;
border:1px solid red;
}
HTML:
<div class="background">
Hover Me
</div>
<div class="container">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>