Positioning moving <div> elements in the background using CSS

Question

OK, so I have these background <div>s which pan left and right using the jQuery plugin, spritely.

So, I was wondering what the best way to position them was.

I obviously have specified both of the two <div>s which each contains one background image to have a z-index: -1 so they appear behind everything else.

But I would like them to be one after another, row by row essentially in the background.

I just need to find out how to do that using CSS, so any ideas you guys have please let me know!

Thanks!

UPDATE:

Trying a jsFiddle here: http://jsfiddle.net/uNmuf/

The only problem appears to still be the positioning...

For some reason I can't get it to work right yet..

UPDATE UPDATE:

Hey thanks a lot Pat, it actually works great! Check out the jsFiddle and my page too!

http://www.marioplanet.com

Answer 1

I would position them absolutely with the first row starting at top: 0 and the second row at top: height_of_first_div. Ideally height_of_first_div will be constant so you can hardcode it in the CSS, but if not, you could always use a snippet of jQuery to put it in the right spot onload.

The CSS would look something like this, assuming the <div>'s are fixed height:

div.pan {
   position: absolute;
   z-index: -1;
   left: 0;
   top: 0;

   height: 100px;   
}

div.row2 {
   top: 100px;
}

And the associated HTML:

<div class="pan row1"></div>
<div class="pan row2"></div>

You can see it in action here.