Background-size:cover auf IPhone

[stobi_de]

Moin Tommy!
Und wieder bist Du früher. Und trotz Weihnachten am PC?
====
Nee, das klappt nicht.
Das Browsergedöhns braucht man zwar wirklich nicht, aber das Hauptproblem ist halt, dass das letzte Ei gewinnt.

Hier die Seite mal online.
Vermutlich habe ich wieder irgendeinen blöden Fehler eingetragen
www.afripix-web.de/test-ei.php

Du scheinst hier auf der Seite nur eines der 3 Eier zu sehen, es sind aber alle da!

[Tommy Herrmann]

... ich bin dieses Jahr ganz alleine über Weihnachten. Familie ist verreist und die meisten Freunde auch - oder sie sind mit ihren Familien beschäftigt. Für mich ist dieses Jahr Weihnachten eine Zeit wie jede andere auch ...


... also - ich habe jetzt nicht die Muße nach der class="bild" lange zu suchen, kann es sein, dass die komplett fehlt

... ich kann sie nicht finden.

[stobi_de]

Die Klasse bild war als member von header drin
Also
header .bild { bla bla}

Ich habe es gerade geändert, sieht aber genauso aus.
Wird gerade ins Netz geladen

[Tommy Herrmann]

Du hast jetzt aber nicht die von mir vorgeschlagene CSS verwendet - aber egal - ich denke da muss die Position raus

top: 0;
bottom: 0;
left: 0;
right: 0;

zumindest tut sich dann was. Haben die Bilder keinen transparenten Hintergrund?

[stobi_de]

Nein, die Bilder haben keinen transparenten hintergrund.
In Deiner letzten CSS ist ein display:block drin, was störte.
Daher habe ich Deine vorletzte css genommen.

[Tommy Herrmann]

ich glaube so aus der Ferne bekomme ich das nicht hin

Gucke mal auch dieses Tutorial - könnte weiter helfen.

https://css-tricks.com/the-fixed-backgr ... ment-hack/

[stobi_de]

Hm...
"I haven’t been able to get it to work for more than 1 image, with CSS only. I’m still working on a solution that has multiple images, that depends upon JS, but I’m afraid, even before starting, that it will not be very performant. IF anyone has any suggestions?"

[Tommy Herrmann]

Ich habe jetzt eien Weile drüber nachgedacht - das kann nicht gehen - ich schreibe gleich warum.

Das habe ich jetzt mal gemacht und werde es prüfen - es wird die Prüfung wohl nicht bestehen.

https://www.mobirise-tutorials.com/Tuto ... nd-Fixiert

[Tommy Herrmann]

Das geht natürlich nicht am iPhone:

Bei einer fixierten Position wird hier die Höhe von 100% (100vh) angegeben - das gilt aber nicht für den Block - auch wenn es so aussieht, sondern für den gesamten Bildschirm.

Insofern wird es - egal ob Class oder andere Class oder einer ID - immer das untere Bild anzeigen, denn dann hat das eine Höhe von 100% und überdeckt das erste Bild.

... das kann man eigentlich auch sehr schön direkt schon in Mobirise erkennen, wenn man die Block-Übersicht mal aufruft. Da kann man gut sehen, das jedes fixierte Bild die gesamte Höhe der gesamten Mobirise-Seite - also inklusive sämtlicher Blöcke - einnimmt.

Das geht nicht und kann nicht gehen.

[stobi_de]

Ich glaube, wir reden wie üblich: mit unterschiedlichen Worten diskutieren wir um was und meinen eigentlich das Gleiche.
Man müsste das Huntergrundbild halt auch irgendwie stapeln können.

Im übrigen muss das gehen mit einem Javascript.
Sobald das entsprechende DIV im Bildschirm erscheint, wird eine Class hinzugefügt und eine andere entfernt.
Dann muss das gehen.

Vielleicht mache ich mich mal dran

[Tommy Herrmann]

Das glaube ich nicht - nicht mit "position: fixed" - mit JavaScript habe ich es auch schon versucht - da passiert genau das Gleiche:

Code: Alles auswählen

  <script>
        document.getElementById("schwarz-weiss").style = `
         position: fixed;
        `;
  </script>

Solltest Du dennoch irgendwie eine Lösung finden, die auch am iPhone funktioniert, lasse mich das bitte wissen.

Ich habe meine bisherigen Erkenntnisse dazu in einem Tutorial zusammengefasst:

https://www.mobirise-tutorials.com/Tuto ... nd-Fixiert