Hero Image - Full Size Image
Einbindung
Ein Hero Image bzw. Full Size Image ist ein großes Bild - oftmals mit einem Text, welches am Anfang einer Webseite eingefügt wird.
Die Höhe des Hero Image können Sie mit der relativen Maßeinheit vh (Viewport Height) festlegen.
Diese Maßeinheit bezieht sich auf die Höhe des Browserfensters.
HTML - Body
Fügen Sie den folgenden Code in den gewünschten Bereich der HTML-Seite ein.
CSS
Ergänzen Sie die vorhandene CSS-Datei mit den folgenden Stylesheet-Definitionen.
/* Das Hero Image */
.hero-image {
/* Mit "linear-gradient" wird das Hintergrundbild (images/photographer.jpg) abgedunkelt, damit der Text leichter lesbar ist */
background-image: linear-gradient(rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url("../images/photographer.jpg");
/* Höhe des Hero-Images festlegen */
height: 100vh; /* 50vh macht das Hero-Image nur halb so hoch */
/* Ausrichtung und Zentrierung des Bildes, damit es auf allen Bildschirmen gut aussieht */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
display: flex;
justify-content: center;
}
/* Platziert einen Text in der Mitte des Bildes (optional) */
.hero-text {
color: white;
text-align: center;
align-self: center;
}
.hero-text button {
border: none;
outline: 0;
display: inline-block;
padding: 10px 25px;
color: black;
background-color: #ddd;
text-align: center;
cursor: pointer;
}
.hero-text button:hover {
background-color: #555;
color: white;
}