Hintergründe mit CSS

30min

einfach

Grundkenntnisse in

• Bilder im Internet
• Einstieg in CSS

Dieser Kurs zeigt, wie man den Hintergrund von Webseiten mit Hintergrundfarben, – grafiken und -mustern gestalten kann.

Dies soll jedoch immer responsiv und so schlank wie möglich geschehen, um schlanke und damit schnelle Webseiten zu erreichen.

Allgemeines

Als Hintergrund eines Elements bezeichnet man die Flächen und Bilder, die hinter seinem Inhalt dargestellt werden. CSS kann dabei mehrere Ebenen übereinanderlegen.

1. Elternelemente, bes. das html- und body-Element
2. Hintergrundfarbe
3. (mehrere) Hintergrundbilder
4. Rahmenfarbe
5. Rahmenbild
6. innenliegende Schatten
7. der eigentliche Inhalt

Weniger ist oft mehr: Mit CSS lassen sich heute sehr aufwendige Hintergründe aus zahlreichen Ebenen, Bildern, Verläufen und Effekten gestalten. Solche dekorativen Hintergründe waren zeitweise sehr beliebt, sind aber für moderne Webseiten oft nicht sinnvoll. Zu viele visuelle Ebenen können vom eigentlichen Inhalt ablenken und seine Lesbarkeit beeinträchtigen. Ein guter Hintergrund unterstützt daher den Inhalt, statt mit ihm zu konkurrieren.

Viele HTML-Elemente haben standardmäßig einen transparenten Hintergrund. Wird beispielsweise body ein Hintergrund zugewiesen, kann dieser deshalb bis zum Rand des Viewports sichtbar sein.

background-color bringt Farbe ins Spiel

Mit der Eigenschaft background-color kann einem Element eine Hintergrundfarbe zugewiesen werden.

Hintergrundfarbe mit background-color ansehen …

body   { 
	background-color: skyBlue; 
	color: midnightblue;
}
p    { 
	background-color: #123;
	color: oklch(90% 0.15 95);
}

In diesem Beispiel erhält der body einen hellblauen Hintergrund, während der Textabsatz dunkelgrau eingefärbt wird.

Für das code-Element hingegen ist keine Hintergrundfarbe festgelegt. Deshalb bekommt es die Voreinstellung, einen transparenten Hintergrund, sodass die Farbe des Elternelements p sichtbar bleibt.

Die Farbangabe kann wie im oberen Regelsatz aus Farbnamen, aber auch wie im unteren Regelsatz aus Hex-, hsl- oder den modernen oklch()-Werten bestehen.

→ Farbe/Farbmodelle

Empfehlung: Verwende stets möglichst kontrastreiche Kombinationen aus Vorder- und Hintergrundfarben, um sehbehinderten Menschen den Zugang zu deinen Inhalten nicht zu erschweren. Der Color Contrast Checker von WebAIM kann im Vorfeld bei der Farbwahl behilflich sein.

→ Farbe/Farben und Kontraste

Hintergrundbilder

Viel individueller und auch gefälliger als eine begrenzte Auswahl an Hintergrundfarben ist ein Hintergrundbild. Früher konnte man hier nur Rastergrafiken verwenden – heute gibt es viele ansprechende Alternativen:

background-image

Mit der Eigenschaft background-image kann einem Element ein Hintergrundbild zugewiesen werden. Die Eigenschaft legt nur fest, welche Grafik verwendet wird. Für die weitere Gestaltung gibt es zusätzliche Eigenschaften.

Einbindung eines Hintergrundbilds ansehen …

body   { 
	background-color: skyBlue ; 
	background-image: url("Cloud.svg");
	color: midnightblue;
	height: 100vh;
}

Die background-image-Eigenschaft referenziert über die url()-Funktion ein externe Grafik mit einer Wolke als Motiv. Diese wird nun über den gesamten Hintergrund immer wieder dargestellt (gekachelt).

Mit background-repeat: no-repeat kann diese Kachelung aufgehoben und nur ein Bild am linken oberen Rand angezeigt werden.

Mehrere Hintergrundbilder

CSS3 erlaubt die Verwendung mehrerer Hintergrundbilder (multiple backgrounds) für ein Objekt. Dazu werden den entsprechenden CSS-Eigenschaften einfach mehrere durch Kommata von einander getrennte Werte übergeben. Die Hintergrundgrafiken werden dabei in umgekehrter Reihenfolge, in der sie genannt werden, übereinander gestapelt, also die erste Grafik liegt ganz oben.

mehrere Hintergrundbilder

background-image:
    url("Cloud.svg"),
    url("Flugzeug.svg");

Dann müssen wir allerdings dafür sorgen, dass sich die Bilder nicht gegenseitig verdecken:

Hintergrundbilder positionieren und skalieren

Man kann Hintergrundbilder mithilfe der Eigenschaften background-size skalieren und dann mit background-position entsprechend anordnen.

Hintergrundbilder formatieren ansehen …

body   { 
	background-image: 
		url("Cloud.svg"),
		url("Flugzeug.svg");
	background-repeat: no-repeat;
	background-position:
		90% 0%,
		center top;
	background-size:
		200px auto,
		300px auto;
}

Wir referenzieren in background-image nun zwei Grafiken, durch ein Komma getrennt.

• background-repeat: mit no-repeat werden die Grafiken nur einmal angezeigt.
• background-position erhält ebenfalls zwei kommagetrennte Wertepaare,
  die die Wolke oben rechts (90% auf der X-Achse; 0% auf der Y-Achse) und
  das Flugzeug mittig oben positionieren.
• background-size: zwei kommagetrennte Wertepaare, die die Größe der Hintergrundgrafiken festlegen.

background-position animieren

Hintergrundeigenschaften, die mehrere Werte zulassen, verwenden die Werte in derselben Reihenfolge wie background-image.

Hintergrundbilder animieren ansehen …

body   { 
	background-color: skyBlue ; 
	background-image: 
		url("Cloud.svg"),
		url("Flugzeug.svg");
	background-repeat: no-repeat;
	background-position:
		top right,
		center top;
	animation: fly 10s linear infinite;		
	...
}

@keyframes fly {
	from {
		background-position:
			top right,
			120% center;
	}
	to {
		background-position:
			top right,
			0% center;
	}
}

Verläufe sind auch Hintergrundbilder!

Mit der zusammenfassenden Eigenschaft background können Hintergrundfarbe und Hintergrundbilder gemeinsam angegeben werden. Auch mehrere Hintergrundbilder lassen sich durch Kommata getrennt notieren.

Ein Farbverlauf ist dabei kein Bild, das heruntergeladen werden muss: linear-gradient() erzeugt das Hintergrundbild direkt im Browser.

Einbindung eines Verlaufs als Hintergrundbild ansehen …

body   { 
	background:
		url("Cloud.svg") top / 200px auto repeat-x,
		url("Flugzeug.svg") center center / 400px auto no-repeat,
		linear-gradient(white, skyBlue);

	color: midnightblue;
	height: 100vh;
}

Der body erhält mehrere Hintergrundbilder. Dabei lernen wir die zusammenfassende Eigenschaft background kennen. Hier werden alle bisher behandelten Einzelwerte zusammengefasst:

• linear-gradient(white, skyBlue) erzeugt einen Farbverlauf, der vertikal von weiß nach skyBlue geht. Da er wirklich den Hintergrund darstellen soll, wird er als letztes definiert.
• url("Flugzeug.svg") center center / 400px auto no-repeat,
  • referenziert mit url() das Flugzeug, das mittig positioniert wird.
  • Nach dem Slash folgt die Größe und dann
  • der Wert für background-repeat. Mit no-repeat wird es nur einmal dargestellt.
• url("Cloud.svg") top / 200px auto no-repeat,
  • referenziert mit url() die Wolke,
  • Der Wert top positioniert sie oben, für den fehlenden zweiten Wert wird der Standardwert links angenommen.
  • Nach dem Slash folgen die Angaben für background-size;
  • repeat-x sorgt dafür, dass die Wolke in der X-Achse immer wieder gezeichnet (gekachelt) wird.

Beachte: Eine (optionale) Angabe einer Hintergrundfarbe muss in diesem Beispiel vor der linear-gradient()-Funktion erfolgen.

Mehr zu Farbverläufen erfährst du im Tutorial Verläufe in CSS.

Siehe auch

• Hero-Bilder - Große Grafiken als Blickfang
  • img und srcset
  • picture
  • Art Direction

  
   
• 

  Verläufe in CSS

  browsereigene Bilder zur Hintergrundgestaltung

  • konische Verläufe
  • lineare Verläufe
  • radiale Verläufe
   
• 

  Tricks mit
  border-image

  viel mehr als Rahmen!

   
• 

  CSS Sprites
  • background-position
   
• Image Replacement
   

Wichtig für die Gestaltung von Hintergrundfarben und -bildern sind folgende Eigenschaften:

• background als zusammenfassende Eigenschaft von
  • background-image
  • background-attachment
  • background-blend-mode
  • background-clip
  • background-color
  • background-origin
  • background-position
  • background-repeat
  • background-size

• border-image als zusammenfassende Eigenschaft von
  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

sowie die Funktionen

• image-set()
• conic-gradient()
• linear-gradient()
• radial-gradient()
• repeating-conic-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()