Mit dem Hintergrund-Styling umgehen

In diesem Beitrag lernst du, wie du den Hintergrund von verschiedenen Elementen stylen und verändern kannst.

Wähle zuerst ein Element aus (z.B. eine Sektion) und navigiere unter Styles > Hintergrund:

Hier arbeitet Chimpify mit Ebenen. Wenn du eine neue Ebene hinzufügst, wird diese automatisch oben draufgesetzt. Diese Ebenen kannst du per Drag and Drop sortieren. Gehe dafür auf die drei Punkte und ziehe die Ebene in die gewünschte Richtung.

Farbe als Hintergrund

Klicke auf das Farbe-Icon. Es wird eine neue Ebene erstellt. Sofort erscheint ein Popup mit einem Farbfeld, das du sicherlich aus anderen Anwendungen kennst:

Wähle hier den gewünschten Farbton. Mit dem Regler unter dem Farbfeld bestimmst du die Deckkraft der Farbe. Bestätige abschließend, indem du auf „Ok“ drückst.

Verlauf als Hintergrund

Klicke auf das Verlauf-Icon. Es wird eine neue Ebene erstellt. Sofort erscheint ein Popup mit einigen Einstellungsmöglichkeiten:

Hier kannst du zuerst bestimmen, ob der Verlauf linear oder kreisförmig dargestellt werden soll:

Danach kannst du das Verhältnis des Verlaufs verändern. Fahre dafür mit dem Mauszeiger über einen Farbregler, halte die linke Maustaste gedrückt und ziehe diese nach links oder rechts. Es erscheint eine Prozentangabe, die dir bei der Orientierung helfen soll.

Um eine weitere Farbe hinzuzufügen, gehst du mit deinem Mauszeiger in eine freie Fläche in dem Farbverlauf. Es erscheint ein neuer Regler mit einem kleinen „+“. Mit einem Klick wird die neue Farbe hinzugefügt:

Um einen Farbregler zu löschen, fährst du mit dem Mauszeiger über diesen, hältst die linke Maustaste gedrückt und ziehst nach oben oder unten. Er erscheint ein kleines „-". Danach lässt du los und der Regler verschwindet. Beachte hier, dass ein Verlauf immer mindestens zwei Farben hat! ;)

Mit einem Klick auf den Farbregler erscheint die Farbauswahl. Außerdem kannst du hier die Deckkraft der Farbe bestimmen, indem du den Regler nach links ziehst:

Um die Richtung eines linearen Verlaufs zu bestimmen, kannst du mit dem Mauszeiger darüberfahren, die linke Maustaste gedrückt halten und ihn in die gewünschte Position bringen. Alternativ kannst du jederzeit die genaue Grad-Zahl eingeben:

Bei einem kreisförmigen Verlauf kannst du hier hingegen die Position des Kreises bestimmen:

Bild als Hintergrund

Klicke auf das Bild-Icon. Es wird eine neue Ebene erstellt. Sofort erscheint ein Popup für die Bildauswahl. Generell kannst du das Bild jederzeit ändern, indem du auf das Bild klickst:

Danach hast du einige Möglichkeiten, um das Hintergrunbild perfekt darzustellen.

Zuerst kannst du die Bildgröße bestimmen:

Hier hast du drei Optionen:

Gestreckt - Hier wird die längere Seite des Bildes über die gesamte Breite bzw. Höhe gestreckt. Das Bild füllt so die gesamte Fläche des Hintergrundes.
Angepasst - Hier wird die kleinere Seite des Bildes über die gesamte Breite bzw. Höhe gestreckt. Das Bild ist immer komplett zu sehen, füllt aber u.U. nicht die gesamte Fläche des Hintergrundes.
Nichts ausgewählt - Hier wird das Bild bei 100% Bildgröße links oben platziert.

Mit den Pfeilen kannst du dann die genaue Bild-Position bestimmen:

Wenn du auf „Erweitert“ klickst, öffnen sich weitere Optionen, die du etwas seltener brauchst:

Hier kannst du folgende Dinge einstellen:

Fixieren - Das Hintergrundbild wird beim Scrollen fixiert (Parallax-Effekt).
Wiederholen - Hier kannst du bestimmen, wie das Bild wiederholt wird. (Diese Option ist nur aktiv, wenn du oben bei der Bildgröße "Angepasst" oder nichts ausgewählt hast.)
Justieren - Hier kannst du die exakte Bildposition bestimmen, indem du mit der linken Maustaste auf einen der Pfeile drückst, gedrückt hältst und in die jeweilige Richtung ziehst.
Breite und Höhe - Hier kannst du die Breite und Höhe des Hintergrundbildes bestimmen. Das brauchst du manchmal, wenn ein Bild genau positioniert oder wiederholt werden muss.

Farbe und Bild als Hintergrund

Wenn du eine Farbe über ein Bild überlagern möchtest (Overlay), gehst du wie folgt vor.

Erstelle zuerst eine Ebene mit einem Hintergrundbild. So wie oben beschrieben:

Erstelle danach eine weitere Ebene mit einer Farbe. Wichtig ist hier, dass du die Deckkraft reduzierst, da man ja das Bild darunter noch erkennen soll: