1. Hintergrundbilder als Kacheln (background-repeat)

Um ein Bild als Kachelmuster im Hintergrund darzustellen, kannst du das background-repeat-Attribut verwenden.

Optionen für background-repeat:

repeat (Standard): Kachelt das Bild sowohl horizontal als auch vertikal.
repeat-x: Kachelt nur horizontal.
repeat-y: Kachelt nur vertikal.
no-repeat: Kein Kacheln; das Bild wird nur einmal angezeigt.

2. Festgelegtes Hintergrundbild, das nicht scrollt (background-attachment)

Mit der background-attachment-Eigenschaft kannst du festlegen, ob sich das Hintergrundbild mit dem Seiteninhalt mitbewegt (scrollt) oder fest bleibt.

Optionen:

fixed: Das Hintergrundbild bleibt an einer festen Position und bewegt sich nicht beim Scrollen.
scroll: Das Hintergrundbild bewegt sich mit dem Inhalt beim Scrollen.

3. Hintergrundgröße festlegen (background-size)

Mit background-size kannst du steuern, wie das Hintergrundbild skaliert wird.
cover: Skaliert das Bild, damit es den gesamten Bildschirm abdeckt, ohne das Seitenverhältnis zu ändern.
contain: Skaliert das Bild, damit es vollständig sichtbar ist, ohne das Seitenverhältnis zu ändern.
auto: Behält die Originalgröße des Bildes bei.

4. Hintergrundbild an einer bestimmten Position (background-position)

Die background-position Eigenschaft steuert die Platzierung des Bildes.
Du kannst feste Werte wie top, right, bottom, left, center oder spezifische Prozentwerte (z. B. 50% 50%) verwenden.

5. Transparenz von einem Hintergrundbild (opacity; z-index)

So verändert man die Sichtbarkeit in einem Hintergrundbild (Transparenz) Beispiel mit 30% Sichtbarkeit:

Um ein Hintergrundbild teiltransparent zu machen, ohne die Lesbarkeit des Inhalts zu beeinträchtigen, kann man ein Pseudo-Element und die Eigenschaften opacity und z-index nutzen. Hier wird das Bild im ::before-Pseudo-Element von body festgelegt. also body::before in den Styles als Pseudo-Element

- Opacity: Mit opacity: 0.3; wird die Deckkraft des Bildes auf 30 % gesetzt, sodass es zu 70 % durchsichtig ist.
- Z-Index: Das Bild wird mit z-index: -1; hinter dem Seiteninhalt platziert, sodass die Transparenz nur das Bild betrifft und der Inhalt normal sichtbar bleibt.