Responded Webdesign: Hintergrundbild wird in Chrome nicht verkleinert

  • Moin moin aus dem hohen Norden!


    Dieses ist mein 1. Beitrag bei Euch und ich halte es für angebracht, ein wenig zu meiner Person zu sagen: Ich bin nicht der Crack in Sachen Homepage-Programmierung, verstehe aber ein wenig die Zusammenhänge. Ich programmiere für den eigenen Bedarf und habe keine professionellen Ambitionen in bzw. auf diesem Gebiet. Trotzdem sollte etwas von mir erschaffendes einigermaßen laufen. Und da tun sich dann ab und zu Probleme auf, bei dem ich Hilfe brauche.


    Ich habe mir mit Hilfe dieses und dieses YouTube-Videos eine kleine Webside im responded Design erschaffen, die mir vom Umfang her völlig genügt!


    Ich habe nur ein Problem mit dem Seiten-Hintergrundbild. Ich habe 2 jpg-Dateien angehängt. Es sind Screenshots von meinem Smartphone. Im Firefox-Browser wird das Hintergrundbild richtig scaliert bzw. verkleinert angezeigt:


    html-seminar.de/woltlab/attachment/1054/


    Der Chrome-Browser auf meinem Smartphone macht dieses nicht. Das zeigt auch der Screenshots:


    html-seminar.de/woltlab/attachment/1055/


    Ich habe mein Hintergrundbild im CSS-Style folgendermaßen eingebunden:



    ...und dann noch weiter...



    Und da ich mich als Gitarrist öffentlich darstelle UND es aus dem "CSS-Schnipseln" ja auch mein Name ersichtlich ist, bin ich keine anonyme Person. Hier der Link zu meiner Page:


    http://www.lpk.rocks


    Könnt Ihr mir helfen? ...warum wird das Hintergrundbild im Chrome-Browser auf meinem Smartphone nicht richtig angezeigt?


    Vielen Dank für Eure Antworten!


    LG
    Skogtroll

  • Beim Android Chrome soll wohl
    background-attachment:fixed;
    als letztes kommen, damit es funktioniert.
    Ausserdem width und height auf 100%.
    Habe das aber eben im Netz gefunden und nicht selber getestet. Vielleicht hilft's ja trotzdem.

  • Danke für Deine Antwort Jav!


    Ich bin Deinem Rat gefolgt und habe "background-attachment:fixed;" weiter nach unten gesetzt und "width:100%;" und "height:100%;" mit dazu genommen.


    Weiter habe ich Aussagen dazu gefunden, das Chrome (und Safari) Anweisungen zu Hintergrundbildern im html-CSS benötigt. Ich habe daraufhin mein CSS-Style folgendermaßen geändert:



    Jetzt passiert in Chrome auf meinem Smartphon folgendes...


    html-seminar.de/woltlab/attachment/1056/



    ...das sieht ja schon mal gut aus - WENN da nicht folgendes beim hochziehen des Displays passieren würde...


    html-seminar.de/woltlab/attachment/1057/


    Es scheint so zu sein, dass das Hintergrundbild im Chrome 2x übereinander liegt und das obenliegende geht beim nach oben ziehen mit nach oben und das darunter liegende kommt zum Vorschein und bleibt stehen ?(


    Bin ich der Lösung trotzdem auf der Spur? Nur was mache ich falsch?!

  • Jetzt spekuliere ich mal (muss ich noch mal selber prüfen):
    Du gibst html UND body die CSS-Angaben. Daher würde mich nicht wundern, wenn da auch 2 Bilder liegen.
    Aber wie gesagt: Muss ich erstmal selber prüfen, doch kann ich das nur für PC.

  • ...wenn da auch 2 Bilder liegen.


    ...genau diesen Gedanken hatte ich auch. Und ich habe Versuche unternommen, den "html, body" Style zu splitten in "html" (an 1. Stelle im Stylesheet) und "body"... ...aber dazu reicht mein Wissen nicht aus. In Frefox ist das Hintergrundbild ganz weg, wenn es nur im "html" Style liegt... ...usw. usw.


    Danke Dir nochmals!

  • Habe - so hoffe ich - die Lösung gefunden.


    Egal wo und wie ich suche im Netz, das Hintergrundbild einer Page wird im "html" Style hinterlegt. Ich hatte es primär im "body" Style.


    Daraufhin habe ich jetzt mein CSS-Style - in Erinnerung an mein im Theard #1 gepostetes Style - folgendermaßen verändert:



    ...aber dann muss man auch daran denken, "@media screen and...." Style-Angaben anzupassen...



    ...denn diese standen ja zuvor unter "body" und nicht "html"


    -----


    Also so alles geändert läuft es jetzt auch im Chrome-Browser meines Smartphones. Dem Firefox und IE11 war es egal, ob das Hintergrundbild im "body" oder "hmtl" Style hinterlegt waren...


    Sollte ich erkennbaren Tünnef in meinen hier geposteten CSS-Styles geschrieben haben > ich bin offen für jede konstruktive Hilfe!


    Allen, die hier mit Interesse mit dabei sind: DANKE!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!