Das Kopfbild in den responsive Designs in voller Breite anzeigen

In den responsive Designs responsive_one und responsive_two besteht das Kopfbild aus zwei Teilen: einem fixen Hintergrund, der stets über die ganze Breite der Seite läuft und dem Kopfbild, das bezogen auf den Seiteninhalt zentriert über den Hintergrund gelegt wird und sich in den Seiten-Eigenschaften einer Seite setzen lässt. Diesen Umstand können Sie nutzen, um bei Bedarf ein Kopfbild anzuzeigen, das stets über die ganze Breite des Displays läuft.

Und so geht's

Hintergrund fuer das Kopfbild
  1. Erstellen Sie ein Kopfbild, das mindestens 2800 Pixel breit ist; die Höhe wählen Sie nach Bedarf. Bedenken Sie bei der Motivwahl, dass das Bild je nach Bildschirmgrösse des Anzeigegeräts in der Breite beschnitten wird.
  2. Erstellen Sie ein transparentes Bild oder laden Sie ein solches hier herunter: Transparent.png
  3. Importieren Sie beide Bilder in Ihr Projekt.
  4. Öffnen Sie die Design-Einstellungen und wechseln Sie auf die Registerkarte Bilder. 
  5. Stellen Sie sicher, dass die Anzeige für das Bild Hintergrund Kopfbild aktiv ist und klicken Sie auf Bild auswählen.
  6. Wählen Sie das gewünschte Bild und schneiden Sie es auf die maximale Grösse von 2'800 Pixeln zu.
  7. Bestätigen Sie die Änderungen mit OK.
  8. Öffnen Sie nun die Seiten-Eigenschaften der Startseite und wechseln Sie auf die Registerkarte Kopfbild.
  9. Stellen Sie sicher, dass die Option Bild anzeigen aktiv ist.
  10. Klicken Sie nun auf Bild auswählen und wählen Sie das in Schritt 3 importierte transparente Bild.
  11. Übernehmen Sie die Einstellungen mit OK.

Das Kopfbild immer anzeigen

Wenn Sie das Kopfbild auch bei einer Bildschirmgrösse < 47em (768 Pixel) anzeigen möchten, befolgen Sie zusätzlich die Schritte im Artikel Das Kopfbild in den responsive Designs immer anzeigen.