CSS/Tutorials/Hintergrund/Hero-Images

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Im vorigen Kapitel wurde gezeigt, wie Sie Hintergründe mit CSS färben können. In diesem Kapitel zeigen wir, wie Sie Webseiten mit viewport-füllenden Bildern gestalten können.

Da das Sehen der wichtigste menschliche Sinn ist, sind hochauflösende Hero-Bilder (engl. hero-images) eine der besten Möglichkeiten Aufmerksamkeit zu erregen. Dabei können sie aus professionell fotografierten Raster­grafiken, SVG-Bildern oder sogar auch eingebundenen Videos bestehen.[1] Wichtig ist, dass sie nicht einfach nur schön aussehen, sondern einen klaren Bezug zum Thema Ihrer Webseite haben.

Meist finden sich Hero-Bilder auf der Startseite oder einer Landing Page und werden durch Scrollen von Single-Page Webseiten entweder durch Zickzack- oder Kartenstapel mit weiteren Bildern abgelöst.

Vorüberlegungen

Während noch vor ein paar Jahren eine Bildgröße von 1920px Breite mehr als ausreichend war, sollten Sie für 4k-Monitore Rastergrafiken mit 4000px Breite verwenden. Passend dazu sollten Sie kleinere Versionen vorhalten und den Browser die passende Datei auswählen lassen. Evtl. können Sie mit Art Direction andere Proportionen und Bildausschnitte anbieten.

Da das Hero-Image den Hintergrund für den Text der Webseite bildet, ist es wichtig, dass Sie den Kontrast wiederholt überprüfen. Nichts ist schlimmer als eine elegante graue Schrift auf einem hellen Bild, die nur mit Mühe zu lesen ist.

Empfehlung:
Überprüfen Sie die Position Ihrer Überschrift in verschiedenen Bildschirmauflösungen, damit diese
  • immer gut erkennbar ist
  • keine inhaltlich wichtigen Stellen der Grafik verdeckt.
Sie können die Grafik auch entsprechend aufhellen oder verdunkeln, um den Kontrast zu erhöhen. Dafür können Sie die Rastergrafik anpassen, aber auch mit CSS-Filter einfach verändern.

Typografie

Da das Hero-Image die zentrale Aussage der Webseite ist, sollte es nur wenig Text in Form einer kurzen Überschrift und maximal eines Absatzes zur Erläuterung sowie einiger optisch dazu passender Verweise geben.

Die Überschrift sollte groß und auffällig in einer zum Bild passenden Schriftart sein. Im Augenblick sind dünnere Schrifttypen oder nur die Konturen einer Schrift modern. Dies lässt sich mit SVG (siehe: SVG/Tutorials/Text/Füllungen und Randlinien) realisieren.

Navigationselemente und Erläuterung, wenn überhaupt vorhanden, sollten so dezent wie möglich sein, um das Bild wirken zu lassen. Eventuell könnten Ghost-Buttons zum Einsatz kommen.

Auch die Farbwahl sollte vom Bild abhängig sein.

  • Ein farbiges Bild erhält schwarze und weiße Textelemente.
  • Schwarz-weiß-Bilder erhalten Bedienelemente aus einer Farbe oder einer einfachen Farbpalette.
Beachten Sie: Text sollte nie wichtige Bildelemente verdecken. Testen Sie mehrfach in allen Auflösungen!

Anwendungsbeispiele

Im Folgenden werden nun einige Lösungsansätze vorgestellt und ihre Vor- und Nachteile abgewogen. 2016 konnte nur eine HTML-Lösung realisiert werden, 2021 ist es nun auch möglich, passende Hintergrundbilder mit CSS anzubieten, damit der Browser nicht mehrere Bildversionen herunterladen muss.

Dank der immer besseren Übertragungsraten und der Anwendung responsiver Bilder können Sie viewport-füllende Bilder einsetzen, ohne auf erträgliche Ladezeiten der Seite zu verzichten.

CSS-Lösung mit image-set()

Dieser Ansatz besticht durch seine klare HTML-Struktur: Nur der Text wird ausgezeichnet, das Bild wird als Hintergrundbild eingebunden:

Zuerst müssen wir dafür sorgen, dass die Webseite den vollen Viewport einnimmt:

Seite nimmt vollen Viewport ein 
html, body {
  margin: 0;
}

html {
  height: 100vh; 
  overflow-y: hidden;	
}
Beachten Sie: Die Webseite wird mit 100vh auf die volle Höhe des Viewports gesetzt. Obwohl alle Innen- und Außenabstände auf 0 gesetzt wurden, erscheint noch ein Scrollbalken. Dieser entsteht durch ein von vielen Browsern im User-Stylesheet hinzugefügten margin (Bei Google Chrome 8px). Mit overflow-y: hidden kann dies verhindert werden.[2]

background-size

Sie können Hintergrundbilder mithilfe der Eigenschaft background-size skalieren.

Skalierung von Hintergundbildern ansehen …
.contain { background-size: contain; }
.cover { background-size: cover; }
.eins  { background-size: 50px;}
.zwei  { background-size: auto 100px;}
.drei  { background-size: 50%; }
.vier  { background-size: 50% 100%; }
  • contain: passt unter Beibehaltung des Seitenverhältnisses die größere Seite der Grafik in den Anzeigebereich ein, ergibt eine vollständige Füllung des Anzeigebereiches
  • cover: passt unter Beibehaltung des Seitenverhältnisses die kleinere Seite der Grafik in den Anzeigebereich ein

Wie Sie im Beispiel erkennen können, wird das Bild mit dem Wert cover so groß skaliert, dass es verpixelt erscheint. Hier müsste eine größere Grafik mit besserer Auflösung zur Verfügung gestellt werden.

Feineinstellungen

Nun muss per CSS festgelegt werden, dass sich das Hintergrundbild über den gesamten Viewport erstreckt:

Hintergrundbild über ganze Seite ansehen …
html {
   background-image: url(hero-image-4096.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
}

Das Hero-Image sieht auf großen Viewports gut aus.

Problematisch ist, dass auch bei kleinen Viewports (und geringen Datenübertragungsraten, obwohl das nicht abgefragt werden kann) das hochauflösende 4k-Bild geladen werden musss, dann aber nur ein kleiner Ausschnitt angezeigt wird.

Responsivität mit image-set()

Mit der image-set()-Funktion ist es jetzt möglich, mehrere Hintergrundbilder anzubieten, von denen sich der Browser das am besten geeignete aussucht.

mehrfache Referenzierung mit image-set() ansehen …
html {
    background-image: url("hero-image-2000.jpg"); /*Fallback */
    background-image: image-set(
        url("hero-image-2000.jpg") 1x,
        url("hero-image-4096.jpeg") 2x
        );
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

Als Fallback (für den IE11) wird ein Regelsatz mit herkömmlicher url()-Funktion notiert. Browser, die image-set verstehen, erhalten nun zwei Grafiken, die über eine Abfrage des zweiten Parameters vom Browser selbst nach der Auflösung des Endgeräts ausgewählt werden.

Beachten Sie, dass im Beispiel noch ein weiterer Regelsatz mit -webkit-image-set() für Chrome, Edge, Opera und Safari notiert ist.

Nachteil dieser Version ist es, dass sich zwar die Auflösung, nicht jedoch die Abmessungen des Bildschirms abfragen lässt.

HTML-Lösung mit img und srcset

In den letzten Jahren wurden Hero-Images aufgrund der damals besseren Browser-Unterstützung überwiegend mit dem picture-Element realisiert. Das folgende Beispiel verwendet einen Viewport-füllenden header mit einem seitenfüllenden Bild und einer Überschrift. Somit ist die Grafik Teil des Inhalts und kann durch einen Alternativtext auch bei einer Sprachausgabe beim Autofahren oder beim Aufrufen durch Screenreader erklärt werden.

CSS für seitenfüllenden Header 
html, body, header, h1, img {
  padding: 0;
  margin: 0;
}

header {
  position: relative;
  height: 100vh; 
  overflow-y: hidden;	
}

Die Innen- und Außenabstände werden auf 0 gesetzt und der header erhält mit height: 100vh; die gesamte Höhe des Viewports. Die Einheit der Längenangabe vh bezieht sich direkt auf die Höhe des Viewports.

Hero-Bilder ansehen …
<header>
  <img src="narzisse-m.jpg" 
       alt="Osterglocke als Zeichen des Frühlings, Quelle: Wikipedia"
       srcset="narzisse-lg.jpg 4140w, 
             narzisse-m.jpg 1920w, 
             narzisse-sm.jpg 1000w">

  <h1>
    <svg id="eins" width="270" height="150">
	  <text x="1" y="100">
	    Frohe
	  </text>
	</svg>
    <svg id="zwei" width="270" height="150">
	  <text x="1" y="100">
	    Ostern!
	  </text>
	</svg>    
  </h1>
</header>

Das Bild wird mit dem srcset-Attribut für verschiedene Viewport-Abmessungen in mehreren Größen referenziert - der Browser lädt sich dann das passende aus.

Die Überschrift wird über das Bild gelegt. Innerhalb des h1-Elements sind zwei svg-Elemente eingebunden, die untereinander absolut positioniert sind. Diese Lösung wurde gewählt, da man SVG-Text (noch) keine feste Breite geben kann und er deshalb bei kleinen Viewports nicht umbricht.

Variante 2: SVG-Grafik

Hero-Bilder ansehen …
<main>
  <header>
    <h1>
      <svg>
        <text x="1" y="100">
	  Frohe Ostern!
  	</text>
      </svg>    
    </h1>
  </header>
  <img id="eins" src="ostern-1.svg" 
       alt="Tulpe mit Ostereiern">
  <img id="zwei" src="ostern-2.svg" 
       alt="Bunny mit Ostereiern">       
</main>

In diesem Beispiel besteht das Hero-Image nicht aus einem einzigen Bild, sondern wird aus mehreren Bildern zusammengesetzt, da sich die einzelnen Bildelemente bei einer Veränderung des Seitenverhältnisses sonst nicht responsiv im Raum verteilt hätten.
Die Links sind als Ghost-Buttons ausgelegt, damit sie zum Gesamteindruck des Bildes passen.

Parallax Scrolling

Unter Parallax Scrolling (Bewegungsparallaxe) versteht man einen Panoramablick, der entsteht, wenn sich Inhalt und der Hintergrund (oder mehrere Hintergrundebenen) mit unterschiedlichen Geschwindigkeiten bewegen und so den Eindruck von räumlicher Tiefe erzeugen.[3][4][5]

Gunnar Bittersmann stellte im Forum einen CodePen mit wenigen Zeilen Javascript vor: parallax scrolling

background-attachment

Sie können mithilfe der Eigenschaft background-attachment bestimmen, wie sich die Hintergrundbilder verhalten sollen, wenn das Element oder sein Inhalt bewegt wird.

Browserunterstützung
caniuse.com
Beispiel ansehen …
p {
    outline: thin solid;
    overflow: auto;
    width: 167px;
    height: 300px;
    background-image: url("Sonnenuntergang.jpg");
    background-repeat: no-repeat;
}
#one   { background-attachment: fixed; }
#two   { background-attachment: scroll; }
#three { background-attachment: local; }

1. Beispiel mit background-attachment

Beispiel ansehen …
<header class="parallax">
<h1>Der wilde Westen</h1>    
</header>

<section>
...
</section>
    
<section class="parallax"></section>

<section>
...
</section>

Das Beispiel enthält einen header und drei section-Elemente. Der header und das zweite section-Element erhalten die Klasse parallax.

Beispiel ansehen …
.parallax {
	background-image: url("https://wiki.selfhtml.org/images/e/e4/TotemPole-2000.jpg");
	min-height: 90vh; 
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

section.parallax {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Forrest_Gump_Point_Monument_Valley_November_2018_003.jpg/1280px-Forrest_Gump_Point_Monument_Valley_November_2018_003.jpg);
}

@media (prefers-reduced-motion: no-preference) {
	.parallax {
	  /* Create the parallax scrolling effect */
	  background-attachment: fixed;
	}
}

Elemente mit der Klasse parallax werden nun 90% der Viewporthöhe hoch, und erhalten ein füllendes Hintergrundbild.

Dann folgt eine Media Query, die die Benutzereinstellungen von prefers-reduced-motion abfragt. Wer hier im Betriebssystem eingestellt hat, dass er weniger Animationen bevorzugt, erhält eine ruhigere Variante ohne Parallax Scroll.

Ohne Festlegung werden die Hintergrundbilder mit background-attachment: fixed fest positioniert und die folgenden section-Elemente werden beim Scrollen über die Hintergrundbilder geschoben.

https://commons.wikimedia.org/wiki/File:USA_10315_Monument_Valley_Luca_Galuzzi_2007.jpg

2. Beispiel mit transform:translate()

Dieses Beispiel erzielt den gleichen Effekt, verwendet aber eine Verschiebung mit transform.

Das HTML-Markup ist ähnlich wie im oberen Beispiel - allerdings werden nur zwei section-Elemente verwendet, da das mittlere ja bis auf das Hintergrundbild leer war.

Beispiel ansehen …
.parallax::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: block;
  background-image: url("https://wiki.selfhtml.org/images/e/e4/TotemPole-2000.jpg");
	background-position: center center;
  background-size: cover;
  transform: translateZ(-1px) scale(1);
  min-height: 100%;
  z-index: -2;
}

section.parallax::before {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Forrest_Gump_Point_Monument_Valley_November_2018_003.jpg/1280px-Forrest_Gump_Point_Monument_Valley_November_2018_003.jpg);
	background-position: top center;
  z-index: -1;
}

Der Header und das letzte section-Element erhalten Pseudoelemente, die auf volle Viewportgröße skaliert und mit einem Hintergrundbild versehen sind.

Weblinks

  1. ↑ Wikipedia: Hero image
  2. ↑ Stack Overflow: When using “height: 100vh” for the container, vertical scrollbar appears
  3. ↑ Wikipedia: Bewegungsparallaxe
  4. ↑ t3n.de: Parallax Scrolling: 30 schicke Beispiele des Webdesign-Trends vom 08.12.2014
  5. ↑ creativebloq: 17 great parallax scrolling websites vom 05.09.2016


Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Tutorials/Hintergrund/Hero-Images&oldid=100255“