Hintergrundbild auf Mobile Geräte

  • Ich habe wahrscheinlich das gleich Problem Problem. Und irgendwie muss es an der Kombination von WSX5 und Android liegen.
    Denn das fixierte Hintergrundbild wird in allen Browsern und in allen Grössen in Windows korrekt wiedergegeben. Nur auf Android nicht.


    Dass es aber prinzipiell möglich ist zeigt ein älteres Projekt von mir, welches ich noch mit NOF erstellt habe. Da wird auch auf Android Geräten und IPad das Bild korrekt skaliert:
    http://www.viagem-de-moto.visionbrasil.com


    Dies wurde mittels:
    <style="background-image: url('./Back1b.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; margin: 0px; webkit-background-size: cover; background-size: cover; o-background-size: cover; moz-background-size: cover;">
    realisiert.


    Nun habe ich mit WSX5 die Seite:
    http://www.wm-russland-2018.info


    in Bearbeitung. Und der Hintergrund sieht auf dem Smartphone halt einfach schei..... aus wenn da nur so eine dunkelblaue unscharfe Masse da ist.


    Würde oberer Code auch in WSX5 funktionieren? Wo kann ich das eingeben? In NOF konnte ich den Quellcode bearbeiten (dafür gab es aber in NOF kein responsiv) und hatte ihn direkt nach dem <body> Tag gesetzt. Wo kann ich den Tag in WSX5 eingeben?

  • Unter den Pixelwerten 480px wird das Hintergrundbild ausgeblendet. Das ist bei der V13 so wegen der schnelligkeit der Anzeige am Handy. Man kann ja theoretisch ein 10MB Bild einbinden als Hintergrundbild und am Handy wäre es fatal denn dann würde der Seitenaufbau ewig dauern. Jedenfalls ein Bild im Zellenstil als Hintergrund wird auch so ausgeblendet am Handy.


    Theoretishc könnte man es per CSS einbinden aber das ist individuell.

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • @andy67
    Dass das Hintergrundbild nicht skaliert wird, ist sehr schade. Da warte ich mal ab, ob Incomedia (hoffentlich bald) eine Lösung hat. Aber es stört mich sehr dass der Hintergrund mit scrollt, also nicht fixiert. Kann das nicht irgendwie mit html (vorläufig) gelöst werden?


    @visionbrasil
    Auf meinem IPad wird auch dein älteres Projekt nicht korrekt angezeigt (siehe Anhang).

  • @Ruud Roefs-Wijnen
    also so sieht es auf meinem Android aus.
    Einen Apfel habe ich nicht, hatte aber damals einen Bekannten mit IPad gefragt ob der Hintergrund ganz angezeigt würde, und er bejahte.


    Screenshot_2017-02-25-15-15-20.pngScreenshot_2017-02-25-15-15-44.png



    @andy67
    also heute werden Datenraten im Mobilbereich angeboten, die haben viele noch nicht einmal zu Hause. Da ist die Bildgrösse kein Argument mehr für ein optisch ansprechendes Hintergrundbild auf dem Smartphone. Zu GSM Zeiten hätte ich dir recht gegeben ;-)
    Abgesehen davon ist das Bild ja da !!!!! Also auch geladen (ausser man würde es bei dieser Auflösung im X5 deaktivieren). Nur so dermassen vergrössert, dass man nur einen pixeligen Mischmasch als Hintergrund hat.
    In meinem WM Projekt ist der Hintergrund überall transparent mit Hintergrundbild. Wenn kein Bild geladen werden würde, dann wäre der Hintergrund weiss und nicht dunkelblau.

  • Negativ. Der Seitenhintergrund ist komplett transparent eingestellt. Also muss das Blau vom Bild-Hintergrund kommen.
    Folglich wird das Bild angezeigt, nur eben stark vergrössert.

  • Also am Handy sieht man vom Hintergrund sowieso nichts nur blaue Streifen wenn der Content unterteilt ist.


    Ein Hintergrund kann nicht transparent sein, sonst wäre es kein Hintergrund!


    Da ich aber keinen Iphone schei.. habe und am Android alles funkioniert und normal angezeigt wird, kann ich nicht helfen.

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Um das Thema Hintergrund und ob das Bild im Smartphone nun geladen wird oder nicht endgültig zu beantworten ..... ja, es wird geladen. Sowohl in Android als auch beim Apfel. Dies konnte ich per Zufall auf einer leeren Seite feststellen bei der der Hintergrund wunderbar dargestellt wird.
    Je länger allerdings der Content ist, um so mehr vergrössert sich das Hintergrundbild - bis man nur noch eine Hintergrundsuppe sieht.
    So zumindest bei X5


    Bei "händischer" Programmierung ohne responsive in NOF ala....
    <body style="background-image: url('./Back1b.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; margin: 0px; background-size: cover;">


    wird der Hintergrund auch bei (Android) Smartphones richtig angezeigt.


    Ergo: X5 "vergisst" den "cover" Befehl bei responsive 3 und 4. Bei 1 und 2 geht es noch.


    Nun die Frage:
    Kann man das Hintergrundbild "von Hand - also nicht über die Struktur" nach obigem Vorbild einfügen und wenn ja wo?

  • JA in den Codeteil unter Seo&Code ! Allerdings musst du mit Css Befehlen arbeiten. Sowas ähnliches mussten wir auch in der V12 beim Header machen. Müsste hier im Forum zu finden sein.

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Ich habe nach langem suchen im Netz auf ner englischsprachigen Seite die Lösung für mich gefunden:


    @media screen and (min-device-width : 768px) and (max-device-width : 1024px) {html {
    background: url('/picture.jpg') no-repeat top center fixed;
    background-size: cover;
    height: 100%;
    overflow: hidden;
    }
    body {
    height:100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    }}



    Ich arbeite mit der V12Pro und musste den Code auf meine Bedürfnisse anpassen, aber wenn dich auskennst solltest du es hinbekommen. Hoffe ich konnte helfen.


    Auf meinem iPad werden die Bilder nun endlich so angezeigt wie es sein soll! :thumbsup:

  • @michaelbogo
    Tja so arg gut kenne ich mich nicht aus. Konnte o.g. Zeile einfach in den HTML Code einfügen (in NOF kann man den kompletten HTML Code direkt bearbeiten) und es tat. CSS ist für mich das rote Tuch. :-(
    Prinzipiell habe ich mir durch den Umstieg von NOF auf X5 die Vereinfachung von responsive mit der Verkomplizierung von Code und CSS erkauft. Beide Programme zusammen wäre der Hit.


    Also wenn ich deine Zeilen (mit entsprechender Bild URL und Auflösung min 480 max 720) in den SEO / Code eingebe, passiert gar nix.