Container mit Hintergrundbild auf dem IPAD

Wie ist die URL zur Seite? Das müssen wir online sehen können.

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:

<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

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.

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

Zitat von Stefan S

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.

Zitat von Lucretia

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.

Alles anzeigen

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