CSS Background Pattern

Hintergrundmuster in purem CSS3

Hintergrund-Grafiken sind meistens Bilder doch diese können je nach Größe viel Speicher und Traffic beanspruchen. Dies ist vor allem für Mobile Devices sehr ungünstig und verhindert den schnellen Aufbau der Seite. Das wiederum ein Rankingfaktor von Google ist, also in mehrfacher Hinsicht hinderlich. Die Abhilfe heißt »CSS3 Background Pattern«, wie man solche generiert beschreibt dieser Artikel.

Hintergrundfarbe und Fixieren

Wir werden ein weinrotes Karomuster im Kelten-Look als Hintergrund kreieren. Dieser Hintergrund sollte über die ganze Website zu sehen sein und fixiert wie eine Tapete stehen. Dafür benötigen wir nur neun Zeilen CSS3 Code, wenn wir diesen schön formatieren.

Das zu erreichende Muster nur mit CSS.

Als erstes fixieren wir den Hintergrund mit background-attachment: fixed;, damit dieser still steht beim Scrollen und nicht mit der Website mit scrollt. Das gibt den typischen Tapeten-Effekt. Damit der Hintergrund auch überall zu sehen ist ordnen wir ihn im body Tag zu. Dann bestimmen wir noch die Größe vom Hintergrund mit background-size: 70px 120px; der standardmäßig über die zur Verfügung gestellte Fläche gekachelt wird.

Das 70 x 120 Pixel großer Hintergrundbild.
body { background-attachment: fixed; background-size: 70px 120px;
}

Nun wählen wir unser Wunschfarbe, in diesem Fall Weinrot mit background-color: #760000;. Kann aber auch eine beliebige andere Farbe sein, doch gedämpfte und hellere Farben sind eher geeignet. Dafür fügen wir den fett gedruckten Code-Abschnitt vor der schließenden, geschweiften Klammer ein.

Weinroter (#760000) Hintergrund
body { background-attachment: fixed; background-size: 70px 120px; background-color: #760000;
}

Weiße Streifen

Jetzt kommen wir zum “zeichnen” des Hintergrundes und hier fängt das ganze wirklich an interessant zu werden. Wir müssen mit Farbverläufen und der Transparenz im CSS arbeiten. Als erstes zeichnen wir einen sich wiederholenden Farbverlauf mit Weiß, der nur ein Pixel breit zu sehen ist. Zusätzlich ist dieser um 120 Grad geneigt und weißt eine Opazität (Gegenteil von Transparenz, Deckkraft) von 10% auf. Da wir zwar mit dem Farbverlauf arbeiten aber diesen nicht als solches sehen möchten, wird dieser nur ein Pixel breit dargestellt. Damit die weiter generierter Hintergrund noch sichtbar ist, werden 60 Pixel transparent dargestellt, die Hälfte der Höhe.

120° geneigte und 10% opake weiße Linie.
body { background-attachment: fixed; background-size: 70px 120px; background-color: #760000; background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px));
}

Damit es ein Rautenmuster sich ergibt, müssen wir noch die sich kreuzenden, weißen Linien zeichnen. Diese werden wieder genau gleich erzeugt nur mit dem Unterschied, dass dies nun 60 Grad geneigt sind. Somit ergeben sich längliche Rauten aus feinen Linien von einem Pixel über den ganzen Hintergrund.

60° geneigte und 10% opake weiße Linie.
body { background-attachment: fixed; background-size: 70px 120px; background-color: #760000; background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px));
}

Fülle die Rauten

Es fehlen noch die dunkleren, gefüllten und versetzten Rauten. Diese werden wiederum mit einem geneigten Farbverlauf erzeugt aber nicht mit einem wiederholenden. Der erste wird um 60 Grad geneigt und mit der Farbe Schwarz und mit der Opazität von wiederum 10% belegt. Doch nun müssen noch die Rauten erzeugt werden und diese generieren wir mit zwei Farbverläufen mit harten Kanten. Der Aufbau dieser ist 25% der Breite mit 10% Schwarz füllen, dann 25% Transparenz, jetzt sind wir in der Hälfte der Gesamtbreite vom Farbverlauf. Nun noch Transparenz bis 75% der Breite und dann wieder 25% Schwarz mit der Deckkraft von 10%. Da der Farbverlauf 60 Grad geneigt ist, erscheint und dies als schräge Linien.

Farbverlauf mit harten Kanten.
body { background-attachment: fixed; background-size: 70px 120px; background-color: #760000; background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 25%, rgba(0,0,0,.1));
}

Damit die Rauten noch vollständig werden, müssen wir das selbe nochmals im 120 Grad Winkel wiederholen.

Das vollständige erzeugte Hintergrundbild.
body { background-attachment: fixed; background-size: 70px 120px; background-color: #760000; background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 25%, rgba(0,0,0,.1));
}

Das Ergebnis und der ganzer CSS Code

Das Ergebnis sieht dann so aus und das alles wird im Browser selber generiert. Weniger Traffig auf dem Webserver als mit Bilder und von allen modernen Web-Browser unterstützt.

Der CSS Code und das daraus resultierende Ergebnis.

Das Original und viele weiter Inspirationen und Beispiele mehr, gibt es hier: http://lea.verou.me/css3patterns/