Hintergrundbild Handy scrollen deaktivieren

[knolle420]

Hey, ich habe mit diesem Code: 

.gradient {
background: var(--gradient-background);
background-attachment: fixed !important; /* Bild scrollt nicht mit */
background-image: url(https://cdn.shopify.com/s/files/1/0820/1732/1306/files/moosa-haleem-758Km8MAcyI-unsplash.jpg?v=17130...) !important;
background-color: transparent !important;
background-position: center center !important; /* Bild wird um 50px nach oben verschoben */
background-size: cover !important;
width: 100%;
height: 100%;
}
document.addEventListener('scroll', function() {
var scrollPosition = window.scrollY;
var backgroundPosition = 'right bottom ' + (50 - scrollPosition) + 'px'; // Adjustiere die Position basierend auf dem Scrollwert
document.querySelector('.gradient').style.backgroundPosition = backgroundPosition;
});


in base.css ein Hintergrund zu meinem Shop hinzugefügt. Auf dem PC ist alles gut. Nur auch dem Handy scrollt das Bild mit obwohl ich es fixiert haben möchte.
Ich habe schon viel rumprobiert aber das funktioniert alles nicht. Kann mir einer helfen?

[Gabe]

Hey @knolle420 

Danke für den Code und bei so einem Fall wäre ein befristeter Vorschaulink oder Link zu einem Beispiel sehr hilfreich das schneller in der Dev Console zu analysieren.  Wo hast du das Code her wenn ich fragen darf?

Somit werde ich generelle Coding Tipps hier abgeben die aber nicht Theme-spezifisch sind. Das Problem, das du mit der Fixierung des Hintergrundbildes auf mobilen Geräten beschreibst, könnte mit dem Browser auf mobilen Geräten zusammenhängen denn manche unterstützen die Eigenschaft background-attachment: fixed nicht korrekt, vor allem aus Leistungsgründen. Deshalb wird das Bild auf mobilen Geräten oft trotzdem gescrollt.

Eine Möglichkeit, dieses Problem zu umgehen, ist die Verwendung eines Tricks mit CSS und JavaScript, um ein ähnliches Verhalten zu simulieren. Hier ist eine mögliche Lösung, die du ausprobieren könntest. Verwende zunächst nur CSS für die Basiseinstellungen des Hintergrundbildes, ohne background-attachment zu setzen:

.gradient {
  background: var(--gradient-background);
  background-image: url('https://cdn.shopify.com/s/files/1/0820/1732/1306/files/moosa-haleem-758Km8MAcyI-unsplash.jpg?v=1713017008');
  background-color: transparent;
  background-position: center center; /* Zentriert das Bild */
  background-size: cover;
  width: 100%;
  height: 100%;
  position: fixed; /* Fixiert den .gradient Container */
  top: 0;
  left: 0;
  z-index: -1; /* Stellt sicher, dass der Inhalt über dem Hintergrund angezeigt wird */
}

Verwende JavaScript nur, wenn du dynamische Anpassungen benötigst, die über das hinausgehen, was CSS bieten kann. Das Skript in deiner Frage scheint die Hintergrundposition dynamisch auf Basis der Scrollposition anzupassen, was in der Regel nicht notwendig ist, wenn das Bild fixiert ist. Wenn du jedoch eine dynamische Anpassung des Hintergrundes beim Scrollen benötigst, stelle sicher, dass das Script korrekt ausgeführt wird:

document.addEventListener('scroll', function() {
  var scrollPosition = window.scrollY;
  var backgroundPosition = 'center ' + (50 - scrollPosition * 0.5) + 'px'; // Einfache Parallax-Effekt
  document.querySelector('.gradient').style.backgroundPosition = backgroundPosition;
});

Diese Lösung setzt das Bild mithilfe von position: fixed; auf der .gradient Klasse fest, was normalerweise auf mobilen Geräten besser funktioniert als background-attachment: fixed. Teste diese Änderungen und passe sie gegebenenfalls an deine spezifischen Anforderungen an.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.