CSS/Tutorials/Hintergrund/Gestaltung mit CSS

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

In diesem Kurs lernen Sie, wie Sie den Hintergrund von Webseiten mit Hintergrundfarben, -grafiken und -mustern gestalten können.

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

Allgemeines

Als Hintergrund eines Elements versteht man alles, was hinter dem Text(inhalt) erscheint. Dies entsteht durch das Übereinanderlegen mehrerer Schichten. Sofern vorhanden, sind dies von unten nach oben:

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

Da die meisten HTML-Elemente einen transparenten Hintergrund haben (Ausnahme: Buttons, etc.), erstrecken sich Hintergrundeigenschaften, die dem Wurzelelement html oder body zugewiesen werden, über den gesamten Viewport.[1]

background-color

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

Beispiel 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-, rgb- oder hsl-Werten bestehen.

→ Farbe/Farbmodelle

Empfehlung: Verwenden Sie stets möglichst kontrastreiche Kombinationen aus Vorder- und Hintergrundfarben, um sehbehinderten Menschen den Zugang zu Ihren Inhalten nicht zu erschweren. Der Color Contrast Checker von WebAIM kann Ihnen 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 einer Rastergrafik ansehen …
body   { 
	background-color: DeepSkyBlue ; 
	background-image: url("Wolke.png");
	background-repeat: no-repeat;
	background-position: 90% top;
	color: midnightblue;
	height: 100vh;
}

Die background-image-Eigenschaft referenziert über die url()-Funktion eine externe Rastergrafik mit einer Wolke als Motiv.

Öffnen Sie das Beispiel im Frickl mit "Ausprobieren" und verändern Sie die Werte für …

  • background-repeat: mit no-repeat wird die Grafik einmal angezeigt; mit repeat-x entlang der X-Achse gekachelt.
  • background-position: feste Längenangaben, Prozentwerte oder Schlüsselwörter wie top center etc. positionieren das Bild.
  • background-size: mit contain oder cover können Sie die Grafik über den gesamten Viewport erstrecken lassen.

Hier zeigt sich auch das Problem von Rastergrafiken: Wenn man das Bild für größere Monitore skaliert, wird es pixelig.

Verlauf

Die background-image-Eigenschaft benötigt nicht zwingend eine externe Grafik. Mit der CSS-linear-gradient()-Funktion können Sie einen Farbverlauf erstellen, der als Hintergrundbild direkt im Browser erzeugt wird:

Einbindung eines Verlaufs als Hintergrundbild ansehen …
body   { 
	background-color: DeepSkyBlue; 
	background-image: linear-gradient(white, DeepSkyBlue);
	color: midnightblue;
	min-height: 100vh;
	display: grid;
	grid-template-rows: 1fr 8em;
}

footer {
	background: green linear-gradient(60deg, green, yellow, sienna);	
	color: black;
}

Der body erhält ein Hintergrundbild. Dies besteht aus einem Farbverlauf, der vertikal von weiß nach DeepSkyBlue geht. Als Fallback wird mit background-color eine Hintergrundfarbe definiert. Dies ist aber eigentlich nicht mehr nötig, da alle Browser solche Verläufe erzeugen können.

Im footer lernen wir die zusammenfassende Eigenschaft background kennen. Hier werden Hintergrundfarbe und -grafik zusammen notiert. Dieser Verlauf besteht aus drei Farben und wird mit deg60 um 60° gedreht.

Eine kurze Erläuterung zur Seitenaufteilung: Damit das Hintergrundbild über den ganzen Viewport sichtbar ist, erhält der body eine min-height von 100vh und erstreckt sich damit mindestens über die Höhe des Viewports, auch wenn, wie in diesem Fall, kein weiterer Inhalt vorhanden ist. Mit display:grid wird das Grid Layout aktiviert und mit grid-template-rows: 1fr 8em; den Element innerhalb des body Höhen gegeben:

  • der footer wird 8em hoch; die vorhergehende h1 erhält mit 1fr den restlichen verbleibenden Platz.

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.

Einbindung eines Verlaufs ansehen …
body   { 
	background: 
		url("../Wolke.png")  repeat-x 80% 10%,		
		url("../Fliege.png") no-repeat 10% center, 
		linear-gradient(white, deepskyblue);
	color: midnightblue;
}

Für dieses Beispiel wurde wieder die background-Eigenschaft verwendet. So können die weiteren Eigenschaften, die die Grafiken positionieren, übersichtlich hinter der jeweiligen url()-Funktion notiert werden.

  1. Zuerst kommt der flächenfüllende Verlauf
  2. wird die Grafik einer Fliege referenziert, die mittels no-repeat nur einmal angezeigt und links mittig positioniert wird
  3. zum Schluss kommt eine Wolke, die mit repeat-x horizontal gekachelt wird.
    Dies sind eigentlich Werte der Einzeleigenschaft background-repeat, werden hier aber der Shorthand-Eigenschaft zugewiesen.
    Die Prozentangaben, bzw. das Schlüsselwört center legen die background-position fest.
Beachten Sie: Eine (optionale) Angabe einer Hintergrundfarbe muss in diesem Beispiel vor der linear-gradient()-Funktion erfolgen.

Transparenter Hintergrund mit rgb

Wenn Sie nur den Hintergrund und nicht den Textinhalt durchscheinend darstellen wollen, verwenden Sie rgb-Farbangaben bei der Hintergrundfarbe.

durchscheinender Hintergrund ansehen …
body {
	background-color: DeepSkyBlue;
	background-image: 
		repeating-linear-gradient(transparent, transparent 30px, white 30px, white 32px), 
		repeating-linear-gradient(to right, transparent, transparent 30px, white 30px, white 32px),
		linear-gradient(white, deepskyblue);
	color: midnightblue;
	height: 85vh;
}
.o0  { background-color: rgb(255 255 255 /0); }
.o2  { background-color: rgb(255 255 255 /.2); }
.o4  { background-color: rgb(255 255 255 /.4); }
.o6  { background-color: rgb(255 255 255 /.6); }
.o8  { background-color: rgb(255 255 255 /.8); }
.o10 { background-color: rgb(255 255 255 /1); }

Das Beispiel entspricht weitgehend dem oberen. Über den weiß-blauen Verlauf werden aber zwei weitere wiederholende Verläufe gelegt.

Die Transparenz der span-Boxen beschränkt sich auf den Hintergrund, der mit background-color und dem entsprechenden rgb-Wert eingefärbt wird. Die Schrift behält immer die volle Deckkraft.

Ursprünglich verwendete das Beispiel die rgba()-Funktion. Im Februar 2022 wurde es durch die einfachere rgb()-Funktion mit Leerzeichen-separierten Werten ersetzt. Der optionale vierte Wert für den Alphakanal wird nach einem Slash notiert.

animierte Hintergrundbilder

Die background-image-Eigenschaft selbst kann nicht animiert werden, aber die Position der Hintergrundgrafiken:

Einbindung eines Verlaufs ansehen …
body   { 
   background-image: 
   		url("../Wolke.png"),	
		linear-gradient(white, skyblue);
   background-position: 0px 20px;
   background-repeat: repeat-x;
   animation: wind 10s linear infinite;		
}

@keyframes wind{
	from { background-position: 0px 20px}
	to { background-position: 600px 20px}
}

Gegenüber dem letzten Beispiel werden wieder die Einzel-Eigenschaften verwendet. Zusätzlich wird über animation die Animation wind aufgerufen. Mit ihr wird die background-position verschoben.

Beachten Sie, dass die Länge der Verschiebung einem Vielfachen der Breite der zu verschiebenden Grafik entspricht, damit es zu keinen Wacklern kommt.

Ein Verlauf selbst kann nicht animiert werden. Mit einem Trick gelingt es doch:

animierter Verlauf ansehen …
body {
	background-image: linear-gradient(-45deg, #337599, #adc8d6, #dfac20, #e9ac9b, #c32e04 );
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

Der mit background-image eingebundene Verlauf erhält mit background-position nun die vierfache Größe des Hintergrunds. Mit der animation-Eigenschaft wird das Hintergundbild nun hin- und hergeschoben.


Weblinks

  1. ↑ Ist für das html-Element weder Hintergrundfarbe noch -bild festgelegt, so werden stattdessen Hintergrundfarbe und -bild des body-Elements auf den Viewport angewendet. Besitzen sowohl das html- als auch das body-Element Hintergrundeigenschaften, so wird das body-Element wie ein normales Blockelement dargestellt.
Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Tutorials/Hintergrund/Gestaltung_mit_CSS&oldid=99725“