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. Mehrere Bilder werden durch mehrere url() Kommagetrennt angegebene. Die erste url()-Anweisung ist das oberste Bild, die letzte Anweisung das unterste Bild.

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

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

See the Pen background-image1 by csswebsite (@csswebsite) on CodePen.

linear-gradient()#

Der CSS Eigenschaftswert linear-gradient werden mehrere Argumente übergeben.

Welche Richtung der Farbverlauf nehmen soll. Dies wird in deg (Grad) angegeben. Standard ist von oben nach unten und muss nicht angegeben werden.
Welche Farben der Farbverlauf beinhalten soll. Diese werden Kommagetrennt angegeben.

.lfv {
  background-image: linear-gradient(deeppink, orange);
}

.container {
  background-image: linear-gradient(90deg, aqua, gold);
}

.wrapper {
  background-image: linear-gradient(45deg, aqua, gold, #aaffee, rgb(125, 23, 88));
}

.box {
  background-image: url('../images/stars.png'), linear-gradient(45deg, rebeccapurple, crimson, #eeaa44, rgb(25, 123, 188));
}

Bemerkung

Bilder und Farbverläufe können auch kombiniert werden.

See the Pen background-image2 by csswebsite (@csswebsite) on CodePen.

See the Pen linear-gradient by csswebsite (@csswebsite) on CodePen.

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 auf der horizontalen und auf der vertikalen Achse.
repeat-x	Das Hintergrundbild wiederholt sich nur auf der horizontalen Achse.
repeat-y	Das Hintergrundbild wiederholt sich nur auf der vertikalen Achse.
no-repeat	Das Hintergrundbild wird nicht wiederholt.

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

See the Pen background-repeat by csswebsite (@csswebsite) on CodePen.

background-position#

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

Bemerkung

Der Standardwert ist 0% 0% und dies ist die 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 Wert automatisch center
x% y%	Der erste Wert ist die horizontale Position und zweite Wert ist für die vertikale Position. Die obere linke Ecke ist 0% 0%. Die untere rechte Ecke ist 100% 100%. Wenn nur ein Wert angegeben wird, ist der andere Wert 50%.

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 Wert automatisch center

x% y%

Der erste Wert ist die horizontale Position und zweite Wert ist für die vertikale Position.

Die obere linke Ecke ist 0% 0%. Die untere rechte Ecke ist 100% 100%. Wenn nur ein Wert angegeben wird, ist der andere Wert 50%.

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

See the Pen background-position by csswebsite (@csswebsite) on CodePen.

background-size#

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

Eigenschaftswert	Erklärung
400px 200px	Der erste Wert bestimmt die Breite, der zweite die Höhe des Bildes. Wenn nur ein Wert angegeben ist, ist der erste Wert für die Breite und der Zweite wird automatisch auf auto gesetzt.
50% 20%	Der erste Wert bestimmt die Breite, der zweite die Höhe des Bildes in Prozent vom Elternelement. Wenn nur ein Wert angegeben ist, ist der erste Wert für die Breite und der Zweite wird automatisch auf auto gesetzt.
cover	Passt das Bild an die Größe des Elternelementes an. Das Bild kann vergrößert, verkleinert werden und eventuell werde Teile des Bildes abgeschnitten.
contain	Passt das Bild so an, dass es vollständig sichtbar ist.

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

See the Pen background-size by csswebsite (@csswebsite) on CodePen.

background-attachment#

Mittels background-attachment kann das Scrollverhalten von Hintergrundbilder verändert werden. Ohne weitere Angaben im CSS scrollen Hintergrundbilder mit dem Inhalt mit, wenn der Benutzer die Seite scrollt.

Eigenschaftswert	Erklärung
scroll	Standardwert. Der Hintergrund scrollt mit dem Inhalt mit. Die Position des Hintergrundbildes ist reletiv zu dem Element, für das es definiert ist.
fixed	Der Hintergrund ist an seiner Stelle fixiert und scrollt nicht mit, wenn der Inhalt scrollt. Die Position des Hintergrundbildes ist relativ zum Browserfenster (Viewport).

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

See the Pen background-attachment1 by csswebsite (@csswebsite) on CodePen.

See the Pen background-attachment2 by csswebsite (@csswebsite) on CodePen.