In jedem Webdesign werden Hintergründe verwendet, um den Inhalt von der Umgebung abzuheben und ihm mehr Tiefe und Interesse zu verleihen. Es gibt verschiedene Arten, wie Hintergründe in CSS deklarieren können. In diesem Artikel werden wir uns mit der background Property befassen und sehen, wie Du sie verwenden kannst, um Deinen Hintergrund zu gestalten.

CSS kurz erklärt

CSS steht für „Cascading Style Sheets“. Das ist eine Computer-Sprache, die dafür verantwortlich ist, wie ein Webbrowser eine Webseite darstellt. Mit CSS kann man die Schriftarten, die Farben, die Hintergrundbilder, die Größe und die Position der Elemente auf einer Webseite festlegen. Sie ermöglicht eine flexiblere Anzeige von Elementen auf allen Bildschirmen.

Bevor CSS existierte, mussten Webdesigner alle diese Attribute in jedem einzelnen HTML-Tag festlegen. Das war sehr mühsam und zeitaufwändig. Mit CSS kann man viel Zeit sparen, weil man einmal die Attribute festlegen kann und sie dann auf mehrere HTML-Tags anwenden kann.

Background-color

Die background-color Eigenschaft in CSS definiert die Hintergrundfarbe eines HTML-Elements. Die Hintergrundfarbe eines Elementes kann entweder mit dem hexadezimalen Wert einer Farbe, einer RGB- oder einer HSL-Farbe angegeben werden.

Der hexadezimale Wert einer Farbe wird mit dem #-Zeichen und anschließend den sechs Zeichen der Farbe (0-9, A-F) angegeben. Die RGB-Farbe wird mit dem rgb() Befehl angegeben, wobei die drei Zahlen die jeweiligen Anteile der Farben Rot, Grün und Blau darstellen. Die HSL-Farbe wird mit dem hsl() Befehl angegeben, wobei die drei Zahlen die jeweiligen Anteile der Farben Helligkeit, Sättigung und Luminanz darstellen.

Die background-color Eigenschaft kann auch mit dem Keyword transparent angegeben werden. Dies bedeutet, dass das Hintergrundbild des Elternelements durchscheinen soll.

Background-image

Wenn Du Deiner Webseite ein bisschen mehr Persönlichkeit verleihen möchtest, kannst Du das CSS-Background-image Property verwenden, um ein Bild als Hintergrund Deiner Webseite einzustellen.

Zunächst einmal musst Du ein Bild finden, das Du als Hintergrund verwenden möchtest. Sobald Du ein geeignetes Bild gefunden hast, lade es herunter und speichere es an einem Ort, den Du leicht wiederfinden kannst. Jetzt öffnest Du Deine CSS-Datei in Deinem Texteditor und fügst den folgenden Code ein:

body { 
background-image: url("hintergrund.jpg"); 
}

Ersetze „hintergrund.jpg“ durch den Namen und die Pfadangabe des Bildes, das Du verwenden möchtest. Dann speichere die CSS-Datei und lade die Webseite in Deinem Browser neu.

Du wirst sehen, dass das Bild als Hintergrund Deiner Webseite angezeigt wird. Aber es sieht vielleicht etwas seltsam aus, weil das Bild wahrscheinlich nicht die richtige Größe für den Hintergrund hat.

Das kannst Du mit dem CSS background-size Property ändern.

Füge den folgenden Code in Deine CSS-Datei ein:

body { 
background-image: url("hintergrund.jpg");
background-size: cover; 
}

Das background-size Property nimmt zwei Werte an, die Breite und die Höhe. In diesem Fall haben wir nur die Breite angegeben, weil wir das Bild so skalieren möchten, dass es die gesamte Breite der Webseite einnimmt.

Wenn Du die Höhe angeben möchtest, kannst Du stattdessen „height: 100%;“ angeben. Jetzt sollte das Bild die richtige Größe für den Hintergrund haben. Wenn es Dir immer noch nicht gefällt, kannst Du mit dem background-position Property experimentieren, um das Bild an einer anderen Stelle anzuzeigen.

Background-position

Background position funktioniert ähnlich dem standardmäßigen CSS position Befehl. Das background-position Attribut legt fest, wo das Hintergrundbild innerhalb eines HTML-Elementes positioniert wird.

Füge hierzu den folgenden Code in Deine CSS-Datei ein:

body {
background-image: url("hintergrund.jpg"); 
background-size: cover; background-position: center; 
} 

Das background-position Attribut nimmt zwei Werte an, die x-Position und die y-Position. In diesem Fall haben wir nur die y-Position angegeben, weil wir das Bild in die Vertikale zentrieren möchten. Wenn Du die x-Position angeben möchtest, kannst Du stattdessen „left: 50%;“ angeben.

Du kannst auch andere Werte für das background-position Property verwenden, z.B. „top“, „bottom“, „left“ oder „right“.

Background-repeat

CSS hat viele verschiedene Möglichkeiten, das Hintergrundbild eines Elements zu wiederholen.

Dies kann nützlich sein, wenn das Hintergrundbild klein ist und mehrfach wiederholt werden soll, um einen größeren Bereich auszufüllen. Oder wenn das Hintergrundbild sehr groß ist und nur einmal wiederholt werden soll, um es besser zu skalieren.

Die CSS-Eigenschaft background-repeat definiert, wie ein Hintergrundbild wiederholt wird. Die möglichen Werte sind:

repeat: Das Hintergrundbild wird sowohl horizontal als auch vertikal wiederholt.

repeat-x: Das Hintergrundbild wird nur horizontal wiederholt.

repeat-y: Das Hintergrundbild wird nur vertikal wiederholt.

no-repeat: Das Hintergrundbild wird nicht wiederholt.

Die CSS-Eigenschaft background-repeat hat keinen Effekt auf das erste Hintergrundbild eines Elements (das mit background-image definiert wird), sondern nur auf das zweite und jedes weitere Hintergrundbild.

Background-attachment

Der CSS-Eigenschaft background-attachment kann man festlegen, wie ein Hintergrundbild im Verhältnis zum restlichen Inhalt verbleiben soll.

Dabei hat man folgende drei Optionen:

• background-attachment: fixed;
• background-attachment: scroll;
• background-attachment: local;

Die Standardeinstellung ist scroll, d.h. das Hintergrundbild scrollt mit, wenn der Inhalt nach unten bzw. rechts scrollt.

Bei der Option fixed wird das Hintergrundbild immer an derselben Position angezeigt, auch wenn der Inhalt scrollt. Dies ist z.B. nützlich, wenn man ein Hintergrundbild mit einem Logo oder einem Menübutton haben möchte, das immer sichtbar bleibt.

Die dritte Option local lässt das Hintergrundbild im Verhältnis zum aktuellen Element scrollen. Dies ist z.B. sinnvoll, wenn man ein riesiges Hintergrundbild mit einem Kopf- oder Fußbereich hat, der sich nicht mit scrollen soll.

CSS background im Überblick

Der Befehl „background“ in CSS ist ein einfacher Weg, um das Hintergrundbild eines Elements festzulegen. Das Hintergrundbild wird hinter dem Inhalt und eventuellen anderen Hintergrundfarben und -mustern angezeigt.

Die Eigenschaft „background-image“ legt das Hintergrundbild fest. Das Hintergrundbild wird hinter dem Inhalt und eventuellen anderen Hintergrundfarben und -mustern angezeigt. Du kannst ein einzelnes Bild, ein paar Bilder oder ein Rahmen für Dein Hintergrundbild festlegen.

Die Eigenschaft „background-color“ legt die Hintergrundfarbe des Elements fest. Wenn DU kein Hintergrundbild angeben hast, wird diese Farbe angezeigt. Wenn DU ein Hintergrundbild angibst, wird diese Farbe hinter dem Hintergrundbild angezeigt.

Die Eigenschaft „background-position“ legt die Position des Hintergrundbilds relativ zum Element fest. Du kannst die Position in Pixeln, Prozent oder Keywords angeben.

Die Eigenschaft „background-size“ legt die Größe des Hintergrundbilds fest. Du kannst die Größe in Pixeln, Prozent oder Keywords angeben.

Die Eigenschaft „background-repeat“ legt fest, ob und wie das Hintergrundbild wiederholt wird. Du kannst „repeat“, „repeat-x“, „repeat-y“ oder „no-repeat“ angeben.

Die Eigenschaft „background-attachment“ legt fest, ob das Hintergrundbild beim scrollen mitbewegt wird oder nicht. Du kannst „scroll“ oder „fixed“ angeben.

FAQ – CSS background