CSS/Eigenschaften/Hintergrundfarben und -bilder

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

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

sowie die Funktionen

• linear-gradient()
• radial-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()

Allgemeines

Das Layout eines Elementes entsteht durch das Übereinanderlegen mehrerer Schichten. Dies sind von unten nach oben und sofern vorhanden:

1. andere Elemente
2. Hintergrundfarbe
3. mehrere Hintergrundbilder
4. Rahmenfarbe
5. Rahmenbild
6. innenliegende Schatten
7. der eigentliche Inhalt

Hintergrundeigenschaften, die dem Wurzelelement zugewiesen werden, erstrecken sich über den gesamten Viewport.

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.

Zugänglichkeit

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 kann Ihnen im Vorfeld bei der Farbwahl behilflich sein. Vorhandene CSS-Ressourcen können Sie unter anderem bei Juicy Studio hinsichtlich der verwendeten Farben prüfen lassen.

Achten Sie auch bei der Verwendung von Hintergrundgrafiken auf einen ausreichenden Kontrast. Sie sollten für eine Vielzahl von Auflösungen und Zoomfaktoren testen, ob nicht zum Beispiel die hellblaue Schrift vor dem wolkigen Hintergrund verschwindet. Sie sollten ebenfalls eine geeignete Hintergrundfarbe festlegen, um die Lesbarkeit Ihrer Inhalte auch bei nicht vorhandenen Grafiken sicherzustellen.

Die neuen Möglichkeiten von CSS3 erlauben es, viele Gestaltungen ohne Hintergrundgrafiken umzusetzen. Beispielsweise ist es nicht mehr notwendig, Farbverläufe oder „runde Ecken“ mit Grafiken zu realisieren.

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

Marc Haunschild zeigt in seinem Blog, wie man mithilfe des Zikaden-Prinzips organische, unregelmäßig wirkende Muster erzielen kann:

• Das Zikaden-Prinzip – The Cicada Principle und warum es Webdesigner etwas angeht

Parallax Scrolling

Unter Parallax Scrolling (Bewegungsparallaxe) versteht man einen Panoramablick, der entsteht, wenn sich Inhalt und der Hintergrund (oder mehrere Hintergrundebenen) mit unterschiedlichen Geschwindigkeiten bewegen und so den Eindruck von räumlicher Tiefe erzeugen.

Weblinks

• Wikipedia: Bewegungsparallaxe
• t3n.de: Prallax Scrolling: 30 schicke Beispiele des Webdesign-Trends vom 08.12.2014
• creativebloq: 17 great parallax scrolling websites vom 05.09.2016