Container mit Hintergrundbild auf dem IPAD

  • Moin!


    habe ein Problem


    Shop - Flat Responsive


    Container mit Bild als Hintergrund - alles OK

    In der Vorschau im Browser alles Ok, die Bilder werden korrekt dargestellt


    nun kommt das I-PAD


    Die Bilder im Hintergrund komplett verpixelt, nicht erkennbar


    Was kann ich tun?


    Gerade der Kunde ist ein Apple Freund der mit Tablet im Laden arbeitet

  • Ok, danke. Hintergrundbilder mit "attachment: fix" (also fixierter Position) werden auf vielen mobilen Geräten aus Performance-Gründen von den Herstellern absichtlich nicht unterstützt. Auf diesen Geräten werden die Bilder dann so hochskaliert, dass die Bildhöhe die gesamte Seitenlänge abdeckt. Daher das pixelige.

  • Das wäre eine Möglichkeit, aber vermutlich eine, die in einem gigantischen Bild resultieren würde, das die Ladezeit der Website explodieren lassen würde.

    Am besten einfach diese Bilder nicht "fix" positionieren. Dann scrollen Sie halt mit den Inhalten mit – so what?

  • Alternativ können Sie es so lassen, wie es ist und nur auf Geräten mit Touch-Bildschirm die Bilder auf "scrollend" statt "fix" stellen:


    CSS
    <style>
    .touch #content .zpContainer.styled{
        background-attachment: scroll !important
    }
    </style>

    (diese CSS-Regel ist spezifisch für das im Projekt verwendete Layout und funktioniert nicht in jedem Layout)

  • Ich hänge mich mal hier an diesen Beitrag an, da ich das gleiche Problem habe.

    ZP-Version 15, Layout Stripe responsive.


    Die im Beitrag empfohlenen Code-Schnipsel funktionieren leider nicht.

    Welchen Code muss ich eingeben, damit nur auf den mobilen Geräten das Attribut "fix" ausgeschaltet (also auf scrollend) gestellt wird und am PC der Effekt "Fix" erhalten bleibt?

    Vielen Dank und Grüße

    Lucretia

  • Ich bin da raus :-) ich habe das Thema für mich abgeschlossen, Bei mir geht es nicht, keine Lösung, ein anderer Weg :-)

  • Also ich habe die Hoffnung noch nicht aufgegeben. In einem anderen Projekt (ZP 15, Layout "Campfire responsive") klappt die Abschaltung des fixierten Containers super. Die Codeschnipsel, die ich auf dem Forum erhalten hatte, funktionieren aber eben leider nicht für das Layout "Stripe responsive".

    Ich hoffe sehr auf einen entsprechenden Tipp hier aus dem Forum ;-)

  • Layoutübergreifend sollte folgender Weg funktionieren.

    • Damit die Container zugeordnet werden können erhält in ZP jeder Container eine eigene ID. Schaue also im Quelltext welche ID deinem Container zugeordnet ist. zB: #container_74
    • Unten stehendes CSS würde auf kleinen Bildschirmen unter 660 Pixeln das Hintergrundbild dieses Containers auf scrollend stellen.


    CSS
    <style>
    @media (max-width: 660px) {
    #container_74 {
    background-attachment: scroll !important;
    }}
    </style>


  • Ok, danke. Hintergrundbilder mit "attachment: fix" (also fixierter Position) werden auf vielen mobilen Geräten aus Performance-Gründen von den Herstellern absichtlich nicht unterstützt. Auf diesen Geräten werden die Bilder dann so hochskaliert, dass die Bildhöhe die gesamte Seitenlänge abdeckt. Daher das pixelige.

    Mittlerweile scheint diese Aussage nicht mehr uneigeschränkt zuzutreffen. Zwar habe ich mit meinen Zp_Projekten dieses Problem, aber es gibt im www Seiten, bei denen auch auf mobilen GEräten der Fa. Apple mit "attachment: fix" korrekt und scharf dargestellt werden.

    Beispielsweise auf dieser Seite: https://tannenhuette.de/ Das Bild von der Alpspitze ist auch auf dem IPhone gestochen scharf und hat trotzdem den "Effekt des Darüberfahrens".

    Bitte einen der ZP Techniker sich des Problems anzunehmen und eine technisch zufriedenstellende Lösung für alle Endgeräte anzubieten.

    Dem Kunden kann ich das, nach dem Motto "it's not a bug - it's a feature", nicht "verkaufen" ;-) !

    Vielen Dank.

  • Das trifft nicht zu, auf der von dir aufgezeigten Seite wird nicht die Anweisung background-attachment: fix sondern ein "Parallax Effekt" verwendet. Dieses lässt sich zB.: mit dem Widget Parallax Container umsetzen.

  • Hallo Mario,

    danke für den Tipp. Mit dem Parallax-Container funktioniert es - so einigermaßen - am Handy zuckt und wandert das Bild dann umotiviert, was meien Vorurteile gege Parallax bestätigt ;-). Das gefällt mir nicht, also bleiben die Container, so wie sie sind.

    Aber in der Wunderkiste "ZP Widgets" habe ich dafür ein bisschen rumgesucht (nicht alles funktioniert bei meinem Layout) und einen hübschen Bild-Hover-Effekt (Bild-Hover-1902) entdeckt. Der macht deutlich mehr her als die fixierten Container :-)

    Also ein dickes DANKE und Problem gelöst, wenn auch anderweitig.

    Gruß Lucretia