resize background image that is scrollable

Question

I'm fresh out of school and working on a website that is already developed for the most part. The developer's were marketers and didn't know much about html, css and especially javascript. I'm building a custom page that will mimic a single-page website but I can't seem to make the background images resizble and scrollable. Here is the bit of html and css.

<article class="panel_kingdom">
    <section>
        <div class="panel" id="first"></div>
    </section>
    <section>
        <div class="panel" id="second"></div>
    </section>
</article>

CSS:

.panel {
z-index:50; 
    top:0; 
    left:0; 
height: 100%; }

.panel_kingdom #first {
background: url(../img_wild/back30_2.jpg) no-repeat center center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; }

I can specify the position to be absolute or fixed and the image appears but it won't scroll. I can't seem to make the "panels" have a relative position and display without setting a specific pixel height. Any help would be appreciated.

Fiddle: http://jsfiddle.net/VGHLe/

Answer 1

There is one thing you need to specify:

display:table

CSS

.panel {
position:relative;
    top:0; 
    left:0; 
height: 100%;
    display:table;/*This was needed.*/
}

.panel_kingdom #first {
background: url(http://farm6.staticflickr.com/5532/11710736156_628ce8eba0_s.jpg) no-repeat center center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
}        
.panel_kingdom #second {
background: url(http://tctechcrunch2011.files.wordpress.com/2012/09/om-nom.png) no-repeat center center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
}

Fiddle link

Answer 2

What you need is:

background-size: 100% 100%;

instead of cover.