Post navigation

So einfach: Ein Fullscreen Hero-Bild auch für dein Theme

Tutorials · · Keine Kommentare

Ein Fullscreen Hero-Bild ist groß in Mode. Vollflächige Bild-Hintergründe für die Startseite sind nicht nur schick, sondern können auch wichtige Aussagen transportieren. Wenn dein Theme nicht über dieses Feature verfügt, dann kannst du es sehr leicht nachrüsten.

Das Einzige was du dafür brauchst, sind etwas CSS und ein wenig HTML. Beides kombiniert sorgt für die zuverlässige Darstellung eines Bildes im gesamten Anzeigebereich des Browsers. Um das realisieren zu können, gibt es eine total einfache Lösung, die in allen modernen Browsern funktioniert.

Ein Fullscreen Hero-Bild: schick und modern

Ein Fullscreen Hero-Bild: schick und modern

Fullscreen Hero-Bild: das HTML

<div id="wrapper">
  <div id="hero">
   <div class="header">
    <h1>Fullscreen Hero-Bild</h1>
   </div>
 </div>
 <div id="content">
  <h2>Tolle Überschrift</h2>
    <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
 </div>
 <div id="footer">
   <p>Ich bin ein Footer.</p>
  </div>
</div>

Fullscreen Hero-Bild: das CSS


body{ margin:0px 0px; }
#hero{
   background-image:url(https://andreas-hecht.com/wp-content/uploads/2016/12/wp-code-1.jpg);
   background-size:cover;
   position:relative;
   height:100vh;
   width: 100%;
}
.header{
   position:absolute;
   top:50%;
   text-align:center;
   width:100%;
   color:#fff;
   font-size:36px;
   -ms-transform: translate(0,-50%); /* IE 9 */
   -webkit-transform: translate(0,-50%); /* Safari */
   transform: translate(0,-50%);
}
#content{
   padding:100px 50px;
   text-align:center;
   width:80%;
   margin:0px auto;
}
#content h2{
   margin:0px 0px 30px 0px;
}
#footer{
   padding:30px 0px;
   text-align:center;
   background:#ddd;
}

Wichtig in diesen beiden Code-Snippets sind nur die beiden Selektoren #hero und .header. Alles andere dient nur dazu, eine rudimentäre Website anzuzeigen. Die ID #hero zeigt das Hintergrundbild vollflächig an, die Klasse .header hingegen stellt den Slogan auf dem Bild dar.

Um das Hintergrundbild vollflächig anzeigen zu können, bedienen wir uns zum einen für die Breite dem width: 100%. Weiterhin verwenden wir das background-size: cover; um das optimale Skalieren des Bildes bei jeder Auflösung sicherzustellen.

Wichtig ist ebenfalls das position: relative;, damit die Überschrift auch auf dem Bild erscheinen kann. Vergessen wir diesen wichtigen Punkt, wird keine Überschrift angezeigt.

Um die vollflächige Höhe zu realisieren nutzen wir die sogenannten Viewport Units. Ein Unit repräsentiert dabei ein Prozent des sichtbaren Bereichs des Browsers.

Folgende Viewport Units sind dabei interessant:

  • vh = 1% der Viewport Höhe (viewport height)
  • vw = 1%der Viewport Breite (viewport width)

In unserem Beispiel haben wir uns für height: 100vh entschieden. Das setzt die Höhe des Viewports auf 100%.

Weitere Informationen zu den Viewpoint Units auf Dr Web:

Der Code in Aktion:

See the Pen Fullscreen Hero-Bild by Andreas Hecht (@AndreasHecht) on CodePen.

Wie du das Fullscreen Hero-Bild in dein Theme einbaust

Der Code oben stellt eine sehr einfache Website dar, wie ich es bereits oben erklärte. Weiter unten kannst du den Code in Aktion sehen, ich habe ein CodePen für dich angelegt.

Wenn du das coole Feature gleich in dein Theme einbauen möchtest, dann kommt hier der bereinigte und nötige Code.

HTML:

<div id="hero">
  <div class="header">
   <h1>Fullscreen Hero-Bild</h1>
  </div>
</div>

CSS:


#hero{
   background-image:url(https://andreas-hecht.com/wp-content/uploads/2016/12/wp-code-1.jpg);
   background-size:cover;
   position:relative;
   height:100vh;
   width: 100%;
}
.header{
   position:absolute;
   top:50%;
   text-align:center;
   width:100%;
   color:#fff;
   font-size:36px;
   -ms-transform: translate(0,-50%); /* IE 9 */
   -webkit-transform: translate(0,-50%); /* Safari */
   transform: translate(0,-50%);
}

Der Einbau in das Theme

Um das Bild in dein Theme einbauen zu können, müssen Theme-Dateien geändert werden. Falls du noch kein Child-Theme verwendest, solltest du jetzt eines anlegen. Denn ansonsten sind alle Änderungen nach einem Theme-Update verschwunden.

Weiterführende Informationen:

Die richtige Datei für die Modifikation ist die header.php. Kopiere sie aus deinem Theme-Ordner in deinen Child-Theme Ordner und passe die Datei an. Die richtige Position ist von Theme zu Theme unterschiedlich. Als Beispiel-Theme verwende ich in diesem Fall das beliebte Twenty Twelve Theme.

Die richtige Stelle zum Einfügen des HTML-Snippets wäre ein DIV unterhalb des Headers, der die Hauptnavigation umfasst. Auf dem Screenshot ist der Header-Bereich mit der Navigation grün hinterlegt.

Unterhalb dieses DIVs kommt unser Code hinein.

Unterhalb dieses DIVs kommt unser Code hinein.

Hier ein Screenshot mit dem eingefügten HTML-Schnipsel:

Die richtige Stelle für den HTML-Schnipsel.

Die richtige Stelle für den HTML-Schnipsel.

Fazit

Mit nur wenig Aufwand erreichst Du ein tolles Ergebnis und kannst deinem Theme ganz einfach ein schickes Hero-Image hinzufügen.

Abonniere meinen Newsletter

Melde Dich für meinen Newsletter "WordPress & Bloggen" an und verpasse keinen Artikel. Als Dankeschön bekommst Du Gratis meine nützliche Checkliste:
»12 Dinge, die Du vor einem Theme-Wechsel beachten solltest«.

Andreas Hecht

ist WordPress-Entwickler und bietet dir WordPress-Sicherheit für deine Website. Zudem entwickelt er WooCommerce Shops mit Ladezeiten von unter einer Sekunde. Er ist ebenfalls Autor von drei richtig guten WordPress E-Books.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.