Hintergrundbild einfügen

Als letzter Punkt des Beispiels soll Hintergrund der Website noch etwas attraktiver gestaltet werden. Dazu wird ein großes Hintergrundbild dem Beispiel-Layout hinzugefügt.

1. Hintergrundbild in Assets-Ordner einfügen

Öffnen Sie das Hintergrundbild durch Klick auf den Link cover.jpg im Browser und speichern dieses via Rechtsklick. Danach fügen Sie die Datei in den Assets-Ordner \Mein eigenes Layout\assets ein.

2. CSS für das Hintergrundbild einfügen

Fügen Sie in der Datei styles.css der body-Angabe das folgendes CSS hinzu:

CSS

background-image: url(cover.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;

Das CSS der body-Angabe sollte dann wie folgt aussehen:

CSS

body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	line-height: 1.3em;
	color: #363b43;
	background-color: #e9e9e9;
	background-image: url(cover.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

3. Hintergrundbild in der Seitenvorlage vorladen (Image-Preload)

Beim Aufrufen einer Seite mit einem großen Hintergrundbild, welches via CSS (background-image) eingebunden ist, kann beim Laden ein Flackern auftreten. Um dies zu verhindern, fügen Sie in der Seitenvorlage default.html direkt nach dem <body>-tag einfach ein sog. Image-Preload ein:

Markup

<img src="<$= page.pathToRoot $>assets/cover.jpg" style="display:none" alt="" />

4. Aktuelle Darstellung des Layouts

Wechseln Sie nun wieder in Zeta Producer. Da der Entwickler-Live-Modus aktiviert ist, sind die Anpassungen am Layout sofort sichtbar.

Klicken Sie in Zeta Producer auf Vorschau, damit die Seite extern in Ihrem Standard-Browser angezeigt wird. Das eingefügte Hintergrundbild sollte nun deutlich erkennbar sein.

5. Ergebnis und Download

Nach Durcharbeitung dieses Beispiels sollte Ihr eigenes Layout in etwa wie auf der Live-Demo aussehen.

Das komplette Layout-Beispiel-Projekt können Sie über den nachfolgenden Button runtergeladen:

Download Layout-Beispiel-Projekt (ZIP)