[phpBB2] Problem- Anzeige des fix. Backgroundimage auf Iphone fehlerhaft

Hallo liebes Team,

habe gerade festgestellt, dass mein oben fixiertes Background-Image auf meinem Iphone nicht ordentlich - also nicht über die gesamte Breite des Bildschirmes - angezeigt wird.
Auf dem Laptop ist es ok.
Woran kann das liegen?

Hier Screenshots:

So soll es aussehen!!!

Und dies ist das Iphone:

Hier ist das obere Img (Im CSS mit repeat eingesetzt) nicht ordentlich.

LG susanne

Das ist eine Eigenart des IPhone / IPad.
Der Browser auf diesen Geräten hat mehrerer Probleme bestimmte Funktionen nicht richtig darstellen zu können.
Leider kannst du da garnichts gegen machen.
Tut mir leid. Aber das Problem besteht schon immer bei diesen Geräten.

Ich habe noch einen Tip für dich:
Du kannst den Firefox Browser benutzen. Mit dem hast du die Möglichkeit den User Client umzustellen. Du kannst den Dan so einstellen, das er sich als IPhone ausgibt und kannst dann am Rechner sehen, wie deine Seite auf dem IPhone ungefähr aussieht.
Du kannst dir dann sogar die Mobile Version ansehen und wenn du willst diese sogar über CSS in der Darstellung verändern.

- ok.....

Lieb von Dir!! Danke für den Tipp !! Das werde ich mal ausprobieren !

LG Susanne

Scha mal ob du es hinbekommst. Ansonsten müsstest du mal den CSS hier Posten mit dem du dieses obere Banner eingesetzt hast.
Eventuell solltest du auch mal versuchen das du dein linkes und rechtes Bild als Hintergrund durchgängig machst und das Hauptbild dann darüber legst.
Du musst hier mal verschiedene Möglichkeiten testen.
Aber das der IPhone Browser mit deiner jetzigen Lösung, korrekt funktioniert wirst du so nicht wirklich erreichen.
Dazu müsstest du eine sogenannte Browserweiche einsetzen und das dann entsprechend erstellen.
Aber das ist ein richtiger Aufwand, der sich hier nicht lohnt.

Ich hab das Logo im Leder als Logo-Image bei den Bildern eingesetzt und den Rest als Repeat-Image im CSS:

Code:

#logofix {
    height: 0px;
    left: 0;
    position: fixed;
    top: 0px;
  background: url(http://s22.postimg.org/qj0zamupd/header_repeat_1.png) repeat-x,
  url(http://s16.postimg.org/c30oydsbp/headerlabel.png) no-repeat;
    z-index: 100;
}

Das witzige ist, dass das untere Image - auch repeat im CSS komplett sichtbar ist .....

Code:

.bodyline {
  background-image: url(http://i58.servimg.com/u/f58/17/14/81/95/unten110.png);
  background-position: 0 100%;
  background-repeat: repeat-x;
  padding-bottom: 28px;
}

Da ich unterwegs bin und nun auch noch die Batterie vom Ipad leer ist und ich jetzt nur noch das Handy habe, habe ich deine Frage mal weiter gegeben.
Ich denke das wir dir da einen anderen Weg finden deine Bilder einsetzen zu können.

Hallo,

könntest du bitte mal testen, ob das Problem auch besteht, wenn keine multiplen Hintergrundbilder verwendet werden? Das heißt, dass du den Eintrag vorübergehend dadurch ersetzt:

Code:

#logofix {
  background-image: url("http://s22.postimg.org/qj0zamupd/header_repeat_1.png");
  background-repeat: repeat-x;
  left: 0;
  position: fixed;
  top: 0;
  z-index: 100;
}

In diesem Eintrag habe ich den multiplen Hintergrund entfernt und die background-Eigenschaften einzeln aufgeführt. Den Wert height: 0; kannst du überhaupt weglassen, er hat in diesem Fall keine Funktion.

Dadurch können wir das Problem besser eingrenzen.

Leider ist die einzige Veränderung, dass der rote Label (also das zweite Background-Image) fehlt. Ansonsten wie gehabt auf dem Iphone

Wenn es auch nicht an den multiplen Backgrounds liegt, wird der mobile Safaribrowser das Hintergrundbild in der eingesetzten Art (fixierte Tabelle) nicht richtig rendern können.

Wie Frank oben bereits erklärt hat, ist es ohne unverhältnismäßigem Aufwand nicht machbar (Browserweiche), die Anzeige bei so anspruchsvollen Designwünschen so hinzubekommen, dass sie unter allen Endgeräten und Browsern zu 100% perfekt ist. Gerade auf iOS mit dem mobilen Safari kann es zu solchen kleineren Anzeigefehlern kommen.

Da Maßnahmen wie eine Browserweiche doch nicht in Frage kommen, müsstest du notfalls diesen Headerbereich komplett umstellen, sodass er anders strukturiert ist. Nach jedem einzelnen Schritt müsstest du überprüfen, ob die Anzeige unter normalen Browsern, unter Mobilbrowsern und iOS korrekt ist. Ich denke allerdings nicht, dass das den großen Aufwand wert wäre. Mit dieser kleinen Unvollständigkeit am iPhone kannst du dich ev. auch abfinden, bevor du sowas auf dich nimmst. Oder du verwendest auf Mobilgeräten die Mobilversion, wie es von Forumieren gedacht und optimiert wäre.
Ich persönlich könnte dir dabei auch nicht helfen, weil ich kein iOS-Gerät besitze und sich dieser Anzeigefehler unter FF/Chrome mit den User Agent Simulatoren leider auch nicht nachvollziehen lässt.

Vielen lieben Dank für Eure Mühe!!!
Ich denke, dass ich damit vorerst leben (lernen muss) kann -> bis ich wieder neue Ideen bekomme...... und das dauert in der Regel ja nicht allzu lange

LG und schönen 3. Advent noch
Susanne