CSS/Layers help

[wyclef]

is there a way to use css and layers and backgrounds to have 3 images that would have overlap each other move at different percentages based on the browsers width?

[wyclef]

this is what i've started....



<div style="position: fixed; left: 47%; top: 112px; z-index: 2;">
<img src="/i/l.gif" width="140" height="126" alt="" border="0" />
</div>

<div style="position: fixed; left: 67%; top: 112px; z-index: 3;">
<img src="/i/s.gif" width="140" height="126" alt="" border="0" />
</div>

<div style="position: fixed; left: 27%; top: 112px; z-index: 4;">
<img src="/i/h.gif" width="140" height="126" alt="" border="0" />
</div>


but i'm thinking thee imgs would all be background imgs because they would all be like 1200px wide and i wouldn't want horizontal sscrolling. What do you think?????