CSS Code: Hintergrundbild Position auf Mobilgeräten ändern

In unserer Facebook-Gruppe "FunnelCockpit Masterclass" haben in den vergangenen Wochen einige Mitglieder gefragt, wie sie ihre Hintergrundbilder auf mobilen Geräten anpassen können, da sie zwar auf Desktopgeräten gut zur Seite passen, allerdings nicht auf mobilen Geräten. Zum Teil sind wichtige Teile des Bildes (z.B. Menschen) nicht zu sehen, da das Hintergrundbild nur die linke Hälfte anzeigt. In diesem Artikel möchte ich euch einige Wege aufzeigen, wie ihr im FunnelBuilder ganz einfach die Position des Hintergrundbilds auf mobilen Geräten anpassen könnt.

CSS TUTORIAL

Die Position und Größe von Hintergrundbildern nur auf Mobilgeräten ändern

Bearbeite die jeweilige Seite im FunnelBuilder und öffne die Seite auf deinem Smartphone, um sie regelmäßig zu aktualisieren, damit du die Position wie gewünscht anpassen kannst.
Sofern du das Hintergrundbild in einer Sektion definiert hast, musst du nun lediglich die Sektionseinstellungen öffnen und auf den Tab "CSS" klicken.
Füge anschließend einen der passenden CSS Codes von unten in die Box unter "CSS (mobile Geräte) ohne dabei die Einstellungen der Desktopansicht zu verändern.
Klicke anschließend auf "Speichern" und fertig!

CSS Code: Falls dein Hintergrundbild weiter nach links geschoben werden muss

Wenn dein Bild nach links bewegt werden muss, müssen wir die Bildposition auf der X-Achse ins Minus verändern. Dazu nutzt du folgenden Code und passt eventuell nach Ansicht auf deinem Smartphone die PX-Anzahl an. Also zum Beispiel statt -200px auf -420px oder -150px. Falls du das Bild weiter nach rechts schieben willst, lässt du einfach das "-" weg. Es ist jedoch nicht zu empfehlen das Bild nach rechts zu schieben, da dann auf der linken Seite kein Hintergrundbild mehr zu sehen ist.

background-position-x: -500px;

CSS Code: Falls deine Sektion sehr groß ist und das Bild somit extrem gestreckt wird

Wenn deine Content-Sektion sehr groß ist, wird sie auf Mobilgeräten sehr in die Länge gezogen. Das hat zur Folge, dass dein Hintergrundbild sehr gestreckt wird, was zu Übergröße und Verpixelung führen kann. Aus diesem Grund müssen wir das Hintergrundbild einmal fixieren, in der Breite limitieren und nur bei Bedarf in der X-Achse verschieben. Das ganze kannst du mit folgendem Code erzielen.

background-position-x: 0px; background-repeat: no-repeat; background-attachment: fixed;background-size: cover;

Hinweis: Klicke auf den jeweiligen Code um ihn automatisch in die Zwischenablage zu kopieren.