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:

body {
  background-image:url(../images/png/LenniPaulKlimek-2580x1731-001.png);  
  background-position:center center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
  -webkit-background-size: cover;
  background-color:#333333;
  font-size:100%;
  margin:0em;
  padding:0em;
}

...und dann noch weiter...

@media screen and (max-width:800px) {
  body {
	background-image: url(../images/png/LenniPaulKlimek-800x537-001.png);
  }  
}




@media screen and (min-width:550px) {
  nav.nav {
	display:block !important;
  }
}




@media screen and (max-width:550px) {
  body {
	background-image: url(../images/png/LenniPaulKlimek-500x336-001.png);
  }

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

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:

html, body {
  background-image:url(../images/png/LenniPaulKlimek-2580x1731-001.png);  
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  -webkit-background-size: cover;
  background-color:#333333;
  background-attachment:fixed;
  width:100%;
  height:100%;
  font-size:100%;
  margin:0em;
  padding:0em;
}

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?!

Zitat von Jav

...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:

html {
  width:100%;
  height:100%;
  background:url(../images/png/LenniPaulKlimek-2580x1731-001.png) center center fixed;
  background-repeat:no-repeat;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
}




body {
  font-size:100%;
}




* {
  padding:0em;
  margin:0em;
}

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

@media screen and (max-width:800px) {
  html {
  background-image: url(../images/png/LenniPaulKlimek-800x537-001.png);
  }
}




@media screen and (max-width:550px) {
  html {
  background-image: url(../images/png/LenniPaulKlimek-500x336-001.png);
  }
}

...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!