left:50%;
then offset from the center how far you want with
margin-left:-102px;
edit:
Okay you can't assume everyone has the same size monitor as you, so you have to design for that. On my 20" monitor the fixed positioning you used to position the <div>'s wasn't aligned. Anyway the code i wrote above will fix that so it looks like your photo.
Now on the the overlap....
THis is how i would set it up:
HTML Code:
<style type="text/css">
body {
background: #48392A url(images/mainBG.jpg) no-repeat top center;
}
</style> So now the background of the page would be this main bg. On the arrow click, write some simple javascript that will change the style values to a background that is complete.
Then you just take out the backgrounds on the other text divs and position them accordingly.
KISS method: Keep It Simple, Stupid
