CSS/Tutorials/Hintergrund/Gestaltung mit CSS

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
30min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Grundkenntnisse in
• HTML
• CSS

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 schlank wie möglich geschehen, um schlanke und damit schnelle Webseiten zu erreichen.

Allgemeines[Bearbeiten]

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[Bearbeiten]

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

Beispiel ansehen …
body   { 
	background-color: DeepSkyBlue; 
	color: midnightblue;
}
p    { 
	background-color: #222;
	color: #bbb;
}

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

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.

Hintergrundbilder[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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

Einbindung eines Verlaufs 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[Bearbeiten]

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.
Beachten Sie: Eine (optionale) Angabe einer Hintergrundfarbe muss in diesem Beispiel vor der linear-gradient()-Funktion erfolgen.

animierte Hintergrundbilder[Bearbeiten]

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 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.


Weblinks[Bearbeiten]

  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.