okay das müsste doch dann eigentlich so aussehen oder?
<html>
<head>
<style type="text/css">
#parallax { position: absolute; }
#parallax li { position: absolute; top: 0px; display: block; left: -1000px; background-repeat: repeat-x; height: 200px; width: 50000px;}
#parallax1 { background-image: url(http://dl.dropbox.com/u/3456054/layer1.png); }
#parallax2 { background-image: url(http://dl.dropbox.com/u/3456054/layer2.png); }
#parallax3 { background-image: url(http://dl.dropbox.com/u/3456054/layer3.png); }
</style>
<script type="text/javascript">
document.body.onmousemove = function(evt) {
var e = evt || window.event;
document.getElementById('parallax1').style.left = (e.clientX * 1.5 - 1000) + 'px';
document.getElementById('parallax2').style.left = (e.clientX * 0.5 - 1000) + 'px';
}
</script>
</head>
<body>
<header>
<ul id="parallax">
<li id="parallax1"></li>
<li id="parallax2"></li>
<li id="parallax3"></li>
</ul>
<h1><span>Headline</span></h1>
<nav>...</nav>
</header>
</body>
</html>
die bilder hab ich nur so schnell erstellt
das funktioniert aber irgendwie nicht. mozillas fehlerkonsole sagt: document.body is null
was soll ich machen?