1

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

Qcom
  • 18,263
  • 29
  • 87
  • 113
  • 1
    Can u please post some code? the HTML block and CSS. you can use jsFiddle.com to make it easier for you and SO users to isolate the problem and we can fork your code. – adardesign Aug 18 '10 at 17:45

1 Answers1

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.

Pat
  • 25,237
  • 6
  • 71
  • 68