Fullscreen Hintergundbild - ipad bzw. iOs

Druckbare Version

09.07.2013, 19:22
oliver.schroth

Fullscreen Hintergundbild - ipad bzw. iOs

Hallo,
ich weiß, dass es für das folgende Problem keine richtige Lösung gibt, suche aber nach einer "best practice", wie man die kursierenden work-arounds in contao umsetzen könnte.

Ich habe eine Seite mit Hintergrundbildern, die über den kompletten viewport reichen und die über "fixed center center" und "background-size: cover" auch in allen relevanten Browsern ihre Position nicht ändern - konkret: http://www.annemaykrueger.de

Das Problem ist, dass Safari unter iPad den viewport auf die komplette Seitenhöhe bezieht und nicht auf die sichtbare Höhe. Wenn ich die Specs richtig verstanden habe, hat das wohl mit zoom und hoch-/querformat zu tun.
Das hat aber zur Folge, dass auf dem ipad das Hintergrundbild komplett unberechenbar skaliert wird. Wie das aussieht kann man sich an oben verlinkter Seite anschauen.

Es gibt diverse workarounds - zum Beispiel bei Chris Coyier - die haben aber alle den Nachteil, dass für unterschiedliche Seiten keine unterschiedlichen Hintergrundbilder eingebunden werden können, da dort immer ein Bild in ein extra-div eingebunden wird.
Für jede einzelne Seite ein einzelnes Seitenlayout mit eigenem Hintergrundbild-div-Modul anzulegen, macht ja aber wohl wenig Sinn.

Hoch- und querformat müsste man wohl über media-queries steuern können, oder?

Danke im Voraus
Oliver Schroth
10.07.2013, 08:33
Spooky

Zitat:

Zitat von oliver.schroth

Es gibt diverse workarounds - zum Beispiel bei Chris Coyier - die haben aber alle den Nachteil, dass für unterschiedliche Seiten keine unterschiedlichen Hintergrundbilder eingebunden werden können, da dort immer ein Bild in ein extra-div eingebunden wird.
Für jede einzelne Seite ein einzelnes Seitenlayout mit eigenem Hintergrundbild-div-Modul anzulegen, macht ja aber wohl wenig Sinn.

Wieso, du kannst dir ja ein

PHP-Code:

<div id="bg"></div>

(nach <body> und vor dem #wrapper) in dein fe_page template hinzufügen und dieses dann mit

PHP-Code:

.startseite #bg {     ... }

stylen. Also ein Beispiel wäre:

PHP-Code:

<body> <div id="bg"></div> <div id="wrapper">     ... </div> </body>

PHP-Code:

#wrapper {     ...     position:relative; /* damit der Inhalt von #wrapper über das #bg gerendert wird */ } #bg {     position:fixed;     left:0;     top:0;     width:100%;     height:100%;     background-repeat:none;     background-position:center;     background-size:cover; } .startseite #bg {     background-image:url('...'); }

Online: https://dl.dropboxusercontent.com/s/...uji021/v1.html

Ich konnte es jetzt allerdings noch nicht auf einem iPad testen, ich mutmaße nur gerade, dass es so auch dort funktionieren würde ;).
10.07.2013, 08:41
Spooky

Übrigens denke ich, dass sich das iPad mit background-attachment:fixed; sogar so richtig oder zumindest "nicht falsch" verhält, wenn es das Background Image über die ganze page size scaled und nicht nur auf den viewport. Denn das background-attachment property steuert nur, ob der Background mitscrollen soll oder nicht, während position:fixed; tatsächlich die Position relativ zum viewport festlegt. (Andererseits ist es dann wieder nicht so klar, ob jetzt width:100% und height:100% relativ zum viewport oder zur page size sein sollte ;).)
10.07.2013, 09:09
oliver.schroth

Großartig, vielen Dank!

Wald/Bäume - an die naheliegendste Lösung, nämlich das page-template anzupassen, hab' ich natürlich gar nicht gedacht.

Zitat:

Zitat von Spooky

Übrigens denke ich, dass sich das iPad mit background-attachment:fixed; sogar so richtig oder zumindest "nicht falsch" verhält, wenn es das Background Image über die ganze page size scaled und nicht nur auf den viewport. Denn das background-attachment property steuert nur, ob der Background mitscrollen soll oder nicht, während position:fixed; tatsächlich die Position relativ zum viewport festlegt. (Andererseits ist es dann wieder nicht so klar, ob jetzt width:100% und height:100% relativ zum viewport oder zur page size sein sollte .)

background-attachment:fixed hat aber scheinbar unter iOS keinerlei Auswirkungen auf die Fixierung des Hintergrundes. Selbst wenn du nämlich dem Hintergundbild eine feste Pixelhöhe und -Breite mitgibst, wird das Bild zwar nicht mehr auf fullpagesize gerendert, wandert aber trotzem beim scrollen nach oben.
10.07.2013, 09:59
Spooky

Zitat:

Zitat von oliver.schroth

background-attachment:fixed hat aber scheinbar unter iOS keinerlei Auswirkungen auf die Fixierung des Hintergrundes. Selbst wenn du nämlich dem Hintergundbild eine feste Pixelhöhe und -Breite mitgibst, wird das Bild zwar nicht mehr auf fullpagesize gerendert, wandert aber trotzem beim scrollen nach oben.

Ah, gut zu wissen :).