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 j开发者_StackOverflowsFiddle 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
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.
精彩评论