Aufgabenpfad / von der Eingabe zum Ergebnis
So erstellst du ein CSS-Hintergrundmuster
- 01
Wähle ein Muster
Öffne Muster und wähle Punkte, Raster oder Diagonale. Alle drei werden allein aus CSS-Verläufen gebaut — an keiner Stelle ist eine Bilddatei beteiligt. Der Wechsel zwischen ihnen behält deine Kachel-, Markierungs- und Farbwerte, Vergleichen kostet also nichts. Das Standard-Punkteraster mit 28 px ist ein ruhiger Einstieg.
- 02
Lege die Kachel fest
Wähle eine Kachelgröße von 8 bis 96 px und eine Markierungsbreite von 1 bis 16 px. Die Markierung darf die halbe Kachelgröße nicht überschreiten; wenn doch, zeigt der Status WERTE PRÜFEN mit der genauen Regel.
- 03
Wähle die beiden Farben
Musterfarbe zeichnet die Markierungen und Flächenfarbe füllt den Grund darunter. Dezente Muster entstehen aus geringem Kontrast zwischen beiden — eine Markierung, die nur leicht dunkler als die Fläche ist, wirkt als Textur statt als Dekoration.
- 04
Beurteile die Wiederholung in echter Größe
Die Vorschau kachelt das Ergebnis über das ganze Panel — genau dort offenbaren sich schwacher Kontrast und zu enge Kacheln. Als Faustregel: Halte die Markierung deutlich unter der halben Kachel — eine 2-px-Markierung auf einer 28-px-Kachel wirkt als Textur, nicht als Rauschen.
- 05
Kopiere das Muster-CSS
Drücke CSS kopieren oder .css herunterladen, um toolars-background-pattern.css zu speichern. Die Regel .pattern besteht aus drei Deklarationen — background-color, background-image und background-size — bereit für jedes Element.
- 06
Wende die Regel an und passe sie an
Die Regel lässt sich auf jedes Element anwenden, ohne Layout-Nebenwirkungen, da sie nur den Hintergrund zeichnet. Passe background-size später an, um die Musterdichte zu ändern, und senke den Kontrast zwischen den beiden Farben — statt die Markierung zu verkleinern —, wenn ein Muster mit dem Text konkurriert.