Website funktioniert auf PC mit allen Browsern, auf Android nur mit Firefox, alle anderen versagen

  • hallo zusammen, ich versuche, einem Kollegen zu helfen. Er will nichts anderes, als ein Hintergrundbild, das mittig und möglichst gross angezeigt wird, sonst nichts :) Das habe ich auch geschafft, mit einem Template das ich gefunden habe. Auf dem PC funktioniert es in allen Browsern. Aber auf dem Android Handy, funktioniert es nur mit Firefox. Alle anderen Browser auf dem Handy inklusive Chrome versagen und zeigen gar nix an. Weiss jemand Rat?

    Danke!

    Diese Website: http://www.mecas.com

  • Nur eine Vermutung.

    Evtl. kommen die Browser mit nicht vorhandenem Code zwischen

    Code
    <body>  </body>

    nicht klar. Ist ein Test wert das Bild zwischen den bodys zu legen. Die Anzeigedefinitionen im style können ja bleiben.

  • Nur eine Vermutung.

    Evtl. kommen die Browser mit nicht vorhandenem Code zwischen

    Code
    <body>  </body>

    nicht klar. Ist ein Test wert das Bild zwischen den bodys zu legen. Die Anzeigedefinitionen im style können ja bleiben.

    Danke! hat leider auch nicht funktioniert, muss wohl was anderes suchen

  • Wenn ich "size" auf 100&% einstelle funktioniert es auf dem Handy nicht, mit cover erscheint es, aber oben abgeschnitten. das habe ich mal herausgefunden

  • Da scheinen mehrere Probleme vorzuliegen.

    Das Template, das du gefunden hast, ist grottenschlecht. Schreib dir lieber selbst etwas passendes.

    Warum?

    Es wird eine steinalte HTML Variante genutzt (XHTML). Solltest du auf HTML 5, das ist aktuelle Standard, umstellen.

    Im CSS sind 'veraltete' und unnötige Webkits angegeben. Alles Unnötige sollte man löschen.

    Im CSS sind Elemente formatiert, die es im Quellcode nicht gibt. -dito- löschen was unnötig ist.

    Im <head> fehlt die Angabe zum 'viewport'.

    Code
    <meta name=viewport content="width=device-width, initial-scale=1">

    Alleine das kann schon einen großen Unterschied machen, da hiermit Anzeigefehler bei mobilen Endgeräten vermieden werden.

    Aber nun zu den eigentlichen Fehlern!

    Du gibst einem Element (in deinem Fall dem <html> - es wäre besser <body> für diesen Zweck zu nutzen) ein Hintergrundbild, gibst dem Element aber keine Größe. Hintergrundbilder werden aber nur so groß dargestellt, wie eben das Elternelement vorgibt. Das bedeutet Elternelement 0 Höhe = Hintergrund 0 Höhe.

    Außerdem hat das Hintergrundbild einen ziemlich großen weißen, umlaufenden Rahmen. Der Rahmen wird also immer angezeigt und du wirst es nie flächendeckend als Hintergrundbild angezeigt bekommen.

    Versuche es mal hiermit:

    Das CSS:

    Das HTML:

    Allerdings ungetestet, sollte aber klappen.

    if(!sleep)

    {$sheep++;}

  • Hey Danke Sailor! Ich habe da keine Ahnung von HTML 5 usw. vor X Jahren mal habe ich mit Hilfen von Foren eine eigene Homepage gebastelt. Aber das ist schon 15 Jahre oder mehr her. bin also sehr sehr froh um deine Hilfe, bzw. mein Kollege :)

    Also es wird jetzt auf dem Handy angezeigt, aber abgeschnitten. Also auf dem Handy sieht man nur gerade das Flugzeug (den Rand habe ich mal versuchweise weggeschnitten. Und auf dem Pc sieht man nur bei einer bestimmten Grösse das ganze Bild.

    Weisst du noch was falsch ist jetzt?

    Wie und wo müsste ich php einfügen? eine neue Datei?

    Wäre super, wenn du mir da noch helfen könntest!

  • Bei der Anzeige des Hintergrundbildes hast du nicht so viele Optionen - das wird über das Attribut background-size: .......; gesteuert.

    Da müsstest du auswählen, was dir am besten passt....

    https://www.w3schools.com/cssref/css3_pr_background-size.asp

    PHP? .... du meinst meine Signatur :)? Die hat mit der Antwort nichts zu tun, die steht unter allen meinen Beiträgen und ist 'nur' die PHP Übersetzung für 'wenn ich nicht einschlafen kann' (if(!sleep)) dann 'zähle ich Schafe' ({$sheep++}).

    Sorry, wenn ich dich damit verwirrt haben sollte - oder willst du in deine Seite noch PHP einbauen?

    if(!sleep)

    {$sheep++;}

  • Ich habe jetzt Background sice "contain" gewählt, jetzt wird einfach der Hintergrund überall in der Mitte angezeigt und verkleinert. Weiss ja auch nicht, was der Kollege mit dieser "Website" will :) Also nochmals besten dank, so lassen wir es mal und schaue, was der Kollege meint dazu. Danke!!