Parallaxe-Scrolling

[LX]

Hi, Masterofdesaster!

Nimm' am Besten so viele Elemente wie Du benötigst (zu viele werden langsam, ansonsten gibt es keine Probleme), die Du unter der Headline absolut positionierst und die mit Hintergrundgrafiken mit repeat-x befüllt sind.

So sähe die Struktur in HTML5 aus (Du kannst natürlich auch jeden anderen Doctype verwenden, musst dann aber auf header- und nav-Nodes verzichten, wenn Du validen Code haben willst):

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

Und im CSS machst Du dann

#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(...); }  
#parallax2 { background-image: url(...); }  
#parallax3 { background-image: url(...); }

Gruß, LX