Samstag, 9. Januar 2016

Scrollende Fullscreen Hintergrundbilder

Erstmal schauen wir uns einen Beispiel an, zudem was ich vorhabe.

Normalerweise weisen wir das Hintergrundbild in der CSS dem body bzw html zu.
Idealerweise bei großen Bildern so, dass der gesamte Screen voll ausgefüllt ist.
Wenn wir aber mehrere Bilder hintereinander haben wollen, die mitscrollen?
Und vor allem so, dass wir diese nach Lust und Laune auch wieder austauschen können.

Wir laden unsere Bilder ersteinmal hoch (ich mache das auf Picassa Webalben) und kopieren uns den jeweiligen Pfad.
Ich werde drei Bilder verwenden (Maße: 1280x800 Pixel)

Als aller erstes setzen wir wie im diesem Tutorial unser Hintergrundbild im body.
Müssen wir zwar nicht, aber um sicher zu gehen, dass immer ein Bild vorhanden ist.
Ich nehme das erste Bild, dass ich unten in der Box verwende.

Jetzt wird es etwas seltsam, denn wir verwenden für unsere Bilder einen ganz normalen div, den wir in die HTML selber reinschreiben/kopieren.
Dieser wird auf  "position:absolute" gesetzt.
Darin befinden sich unsere Bilder, ebenfalls in jeweils einen div.
Jedoch nicht wie üblich im img-tag, sondern als Hintergrundbild des divs.

Zur Verdeutlichung:
<div id="bg-box">  /* Masterbox */
     <div id="bg-01"></div>   /* Erstes Bild */
     <div id="bg-02"></div>   /* Zweites Bild */
     <div id="bg-03"></div>   /* Drittes Bild */
</div>

Und hier unsere CSS:
#bg-box {
top:0;
position:absolute;
width: 100%;
height: 100%;
z-index:-1;} /* ganz wichtig den z-index negativ zu setzen! */

#bg-01 {
background: #000 url(Pfad zu 01.jpg) no-repeat center center fixed;
background-size: cover;
margin: 0;
padding: 0;
width: 100%;
height: 100%;}

#bg-02 {
background: #000 url(Pfad zu 02.jpg) no-repeat center center fixed;
background-size: cover;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

#bg-03 {background: #000 url(Pfad zu 03.jpg) no-repeat center center fixed;
background-size: cover;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

Jetzt können wir direkt in unsere HTML hinein gehen.
(Dashboard>>Vorlage>>HTML bearbeiten)

Als aller erstes die CSS-Anweisung kopieren.
Wohin ist nicht so wichtig. Hauptsache Ihr findet sie wieder falls Ihr die umschreiben/löschen/whatever wollt.

Die HTML-Anweisung, also diese:
<div id="bg-box">
     <div id="bg-01"></div>
     <div id="bg-02"></div>
     <div id="bg-03"></div>
</div>
kopieren wir genau so hinein.
Am besten direkt hinter den öffnenden body-Befehl ( <body> )

Und das war es, mehr brauchen wir nicht.

jpm