Erstellen von Hintergrundbildern, die sich nahtlos kacheln lassen

In wenigen Schritten lässt sich ein Hintergrundbild erstellen, das nahtlos gekachelt werden kann. Zunächst erstelle ich ein relativ kleines Bild von 80px x 80px und mit dem Formwerkzeug auf einer eigenen Ebene ein Muster für den Hintergrund.

Anschließend markiere ich das gesamte Bild und kopiere es mit strg + C in die Zwischenablage zur späteren Verwendung.

Nun klicke ich auf Bild => Bildgröße => Arbeitsfläche und vergrößere die Arbeitsfläche auf 200px x 200px. Achte darauf, dass „Relativ“ nicht angekreuzt ist und das eigentliche Bild im Zentrum bleibt.

Nun klicke ich auf Filter => Andere und wähle dort den Offset-Filter aus. Hier trage ich sowohl bei horizontal als auch bei vertikal einen Wert von 100px ein (jeweils die Hälfte der Höhe und Breite der Arbeitsfläche).

Anschließend füge ich das ursprüngliche Muster, das ich vorhin in die Zwischenablage kopiert hatte, mit Strg + Umschalt + V in die Mitte des neu erstellten Musters ein.

Den weissen Hintergrund ersetze ich mit einer dem Muster angepassten Farbe, damit das Hintergrundbild farblich dezent auch im Hintergrund bleibt. Jetzt gehe ich auf „Für Web und Geräte speichern“ und wähle als Dateiformat png-8. Das ergibt eine geringe Dateigröße bei guter Qualität. Bevor wir nun die Datei speichern, gibt es die Möglichkeit, das Ergebnis zu prüfen. Hierzu klicke ich bei „Für Web und Geräte speichern“ rechts auf das Feld für erweiterte Optionen und wähle hier „Ausgabeeinstellungen bearbeiten“

Links bei den Optionen wähle ich im Dropdown-Menu „Hintergrund“ aus und auch die Anzeigeeinstellung ist Hintergrund.

Um das Ergebnis nun anzuschauen, klicke ich unten auf „Vorschau“ und kann anschließend sehen, wie das Muster gekachelt aussieht.

Wenn ich mit dem Ergebnis zufrieden bin, kann ich nun die Datei abspeichern und anschließend in der CSS Datei meines Webtemplates als Hintergrundbild definieren.