Media-Query(s ) könnten Dir helfen.

[Raketenwilli]

warum es im Browser am Laptop, bei sehr kleinem Browserfenster (Handy simuliert) herunterskaliert wird, an mobilen Endgeräten jedoch nicht.

Ich kann es mangels eines passenden Gerätes nicht wissen. Frage: Schließt es denn unten sauber ab? (das wäre die Bestätigung) Oder mitten im Hintergrund?

Ich weiß zudem nicht was Du siehst und auch nicht genau was Du erreichen willst. Damit wir also wissen worüber wir uns unterhalten: Hier das Bildschirmfoto auf meinem Smartphone (Chromium, „Adblockbrowser“, Android 10):

Simulationen sind schließlich nur Simulationen.

Möglicherweise willst Du ja spezieller zugeschnittene Hintergrundbilder für bestimmte Bildschirmformate bereit stellen:

@media all {
   # Vielleicht kein Hintergrundbild für Drucke, Vorlesen etc?
}


@media screen, projection {
   # Quadratisch :-)- Nein-Einstellung für alle Screens
}


@media screen, projection and (orientation: portrait) {
   # Höher als breit
}

@media screen, projection and (orientation: landscape) {
   # Breiter als hoch.
}
…

Das kann man dann noch stufenweise mit Bildschirmgrößen kombinieren.

Weitere Tipps:

• Der HTML-Validator meckert Dein HTML an. So lange der DAS tut würde ich nicht damit rechnen, dass die Webseite überall entsprechend meinen Erwartungen aufscheint.
• Der CSS-Validator geht gerade mal wieder- da sehe ich aber nichts (abgesehen von den fehlenden Media-Querys)