Hintergrundbild

background-image

Mit der CSS Eigenschaft background-image kann einem Element ein oder mehrere Hintergrundbilder hinzugefügt werden.

Eigenschaftswert	Erklärung
url()	Definiert ein Hintergrundbild mittels absoluten oder relativen Pfad.
linear-gradient()	Definiert einen Farbverlauf von zwei oder mehreren Farben.

url()

Dem CSS Eigenschaftswert url() wird der absolute oder relative Pfad zum Bild in einfachen Anführungszeichen übergeben. Werden mehrere Hintergrundbilder angegeben, müssen sie kommasepariert aufgelistet werden. Das erste angegebene Bild liegt ganz oben, danach folgen die weiteren Ebenen.

header {
  background-image: url("../images/hintergrundbild.jpg");
}

footer {
  background-image: url("../images/stars.png"),
    url("../images/hintergrundbild.jpg");
}

Überschrift

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores enim libero eligendi inventore velit recusandae aspernatur aliquam nemo quasi vitae esse aperiam ut repudiandae vel non, molestiae hic commodi assumenda?

background-size

Mit der CSS Eigenschaft background-size kann die Größe des Hintergrundbildes bestimmt werden.

Eigenschaftswert	Erklärung
400px 200px	Breite und Höhe des Bildes. Wird nur ein Wert angegeben, ist der zweite auto und wird relativ zum anderen Wert angepasst.
50% 20%	Breite und Höhe relativ zum Elternelement. Wird nur ein Wert angegeben, ist der zweite auto und wird relativ zum anderen Wert angepasst.
cover	Bild wird zugeschnitten/vergrößert, füllt das Element vollständig aus.
contain	Bild bleibt vollständig sichtbar und wird passend skaliert.

.container {
  background-image: url("../images/position.jpg");
  background-size: cover;
}

background-repeat

Die CSS Eigenschaft background-repeat gibt an, wie oft Hintergrundbilder wiederholt werden oder gar nicht.

Eigenschaftswert	Erklärung
repeat	Das Hintergrundbild wiederholt sich horizontal und vertikal.
repeat-x	Das Hintergrundbild wiederholt sich nur horizontal.
repeat-y	Das Hintergrundbild wiederholt sich nur vertikal.
no-repeat	Das Hintergrundbild wird nicht wiederholt.

.container {
  background-image: url("landscape.jpg");
  background-repeat: no-repeat;
}

background-position

Die CSS Eigenschaft background-position gibt die Position an, an der das Bild positioniert wird.

Bemerkung

Der Standardwert ist 0% 0% (linke obere Ecke).

Eigenschaftswert	Erklärung
left top left center left bottom right top right center right bottom center top center center center bottom	Position innerhalb des Elementes. Wird nur ein Wert angegeben, ist der andere automatisch center.
x% y%	Erster Wert = horizontal, zweiter Wert = vertikal. 0% 0% ist oben links, 100% 100% unten rechts. Bei nur einem Wert ist der andere 50%.

.box {
  background-image: url("../images/position.jpg");
  background-repeat: no-repeat;
  background-position: right center;
}

background-attachment

Mittels background-attachment kann das Scrollverhalten von Hintergrundbildern verändert werden.

Eigenschaftswert	Erklärung
scroll	Standardwert. Hintergrund scrollt mit dem Inhalt. Position relativ zum Element.
fixed	Hintergrund ist fixiert und scrollt nicht mit. Position relativ zum Viewport.

body {
  background-image: url("hintergrund.jpg");
  background-attachment: fixed;
}

Marvels Avengers

Die mächtigsten Helden der Erde müssen zusammenkommen und lernen, gemeinsam als Team zu kämpfen, wenn sie den bösen Loki und seine Alien-Armee darin hindern wollen, die Menschheit zu versklaven.

Loki, the adopted brother of Thor, teams-up with the Chitauri Army and uses the Tesseract's power to travel from Asgard to Midgard to plot the invasion of Earth and become a king. The director of the agency S.H.I.E.L.D., Nick Fury, sets in motion project Avengers, joining Tony Stark a.k.a. the Iron Man; Steve Rogers, a.k.a. Captain America; Bruce Banner, a.k.a. The Hulk; Thor; Natasha Romanoff, a.k.a. Black Widow; and Clint Barton, a.k.a. Hawkeye, to save the world from the powerful Loki and the alien invasion.