CSS/Layers help

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?

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???