Costum HTML Shop Hintergrundbild

[Vince388]

Hallo,

ich bin gerade dabei meinen Shop zu bauen und möchte über den kompletten Shop ein festes Hintergrundbild (bis auf Header und Footer).
Dafür habe ich mir einfach eine neue Sektion mit benutzerdefinierter HTML eingefügt und das Hintergrundbild mit folgendem Code geändert:

<style>
body {
margin: 0;
padding: 0;
background-image: url('xxxxxxx'); /* Hintergrundbild URL hier einfügen */
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
}
</style>

Dies funktioniert in meinem Browser und auf meinem Android Handy auch genau so wie ich es haben will (Hintergrundbild ist nicht gezoomed und Sektionen bewegen sich über das feststehende Bild).

Öffne ich den Shop jedoch über ein Apple Gerät mit Safari ist das Bild stark verpixelt hineingezoomed und bewegt sich beim scrollen mit, steht also nicht im Hintergrund fest).

Habt ihr villeicht irgendeine Lösung oder Idee wie man dieses Problem beheben könnte?

P.S. als Theme nutze ich Debutify.

Vielen Dank schon mal 🙂

[Gabe]

Hey @Vince388 

Leider ist das Problem auf Safari ein altbekanntes Problem das manchmal bei Safari auftritt, insbesondere in Verbindung mit dem background-attachment: fixed;-Stil.

Um das Problem zu beheben, kannst du einen Workaround verwenden, der speziell für Safari gedacht ist. Hier ist, wie du es machen kannst:

1. Füge einen separaten Stil für Safari hinzu, indem du die CSS Media Query für Webkit (den Browser-Engine von Safari) verwendest.

2. Verwende eine Kombination aus ::before Pseudo-Element, um einen festen Hintergrund zu simulieren.

Hier ist ein überarbeiteter Code:

<style>
body {
    margin: 0;
    padding: 0;
    background-image: url('xxxxxxx'); /* Hintergrundbild URL hier einfügen */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Workaround für Safari */
@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        body::before {
            content: "";
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: -1;
            background-image: url('xxxxxxx'); /* Hintergrundbild URL hier einfügen */
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
        }

        body {
            background: none;
        }
    }
}
</style>

Im obigen Code erzeugt body::before effektiv einen festen Hintergrund für den gesamten Browser-Viewport, der den gleichen Effekt wie background-attachment: fixed; hat, aber ohne die problematischen Zoom- und Scroll-Probleme von Safari.

Bei weiteren Fragen bitte die Theme Entwickler von Debutify kontaktieren. Die haben einen tollen Kundensupport Team!

---
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. Oder lass wissen, wenn du weitere Fragen dazu hast oder zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[Vince388]

Hey @Gabe 

Also kann man da nichts wirklich gegen tuen?
Ich bin allgemein super zufrieden mit dem Hintergrund, nur auf Safari sieht dies leider absulut grauenhaft und amateurhaft aus....

[Gabe]

@Vince388 

Ja, das ist auch ein Problem des Debutify Themes (dass wir eigentlich nicht unterstützen) und dessen Kompatibilität mit Safari. Hast du auch andere Themes zum Shop hinzugefügt, um sie zu testen?

Das Problem mit background-attachment: fixed in Safari, besonders auf iOS-Geräten, ist bekannt und hat Webentwickler seit einiger Zeit herausgefordert. Die Kernursache des Problems ist, dass Safari (insbesondere auf iOS) die fixierte Hintergrundpositionierung nicht so verarbeitet wie andere Browser.

[Vince388]

Hey @Gabe 
ich habe deinen Code oben noch einmal in allen möglichen Varianten probiert, komme aber immer aufs selbe schlechte Ergebniss.
Außerdem habe ich gerade noch Origin und Dawn probiert, dort wird mir jedoch erst gar kein Hintergrundbild angezeigt, wenn ich dein code ins benutzerdefinierte Liquid einfüge....

[Gabe]

@Vince388 

Tut mir leid zu hören. An dieser stelle empfehle ich einen Experten zu kontaktieren wenn die Debutify Entwickler nicht weiterhelfen können. 

Einige findest du hier oder stelle deine Frage in unserem Entwickler Forum wo viele Programmierer aus Indien auch gerne weiterhelfen können.

VG,