[FRAGE] ERLEDIGT! Positionierung eines Hintergundbildes mit CSS

[schlegel.berlin]

Hallo ihr Lieben,

ich habe mich vor längerer Zeit schon einmal mit diesem Problem herumgeschlagen und glaubte dann, dank Eurer Hilfe, eine Lösung gefunden zu haben.
Dem war aber nicht wirklich so.
Ich ließ das dann erst einmal liegen, weil andere Aufgaben dringlicher waren, aber jetzt muss ich das Problem doch lösen und finde nicht den richtigen Ansatz.

Firefox und Google Chrome reagieren auf die relevante CSS-Anweisung wie gewünscht, SAFARI (Apple UND PC) und IE aber nicht.

Es geht darum, ein Hintergrundbild, unabhängig der Bildschirmgröße/Aulösung, IMMER verzerrungsfrei abzubilden, wobei immer die volle Breite des Bildes angezeigt werden soll.

Das Bild selbst hat ein Seitenverhältnis von 4:3.

Bei 16:9 Format des Monitors/Auflösung, soll das Bild in der Vertikalen zentriert beschnitten werden, also oben und unten gleichmäßig.

Der CSS-Schnipsel, das das bewerkstelligen soll:

img#bg
{
position: fixed;
width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

Wie eingangs erwähnt, Firefox und Google Chrome machen das auch wie gewünscht, aber eben IE und SAFARI nicht.
Ich habe mir echt das Hirn zermartert, finde aber keine Lösung.

Könnt ihr mir helfen?

Liebe Grüße, Karin

Hier mal 2 Screenshots (Soll und IST):


- - - Aktualisiert - - -

ERLEDIGT!

Ich Idiotin habe schlicht folgendes vergessen:

- - - Aktualisiert - - -

ERLEDIGT!

Ich Idiotin habe schlicht folgendes vergessen:

body, html {
	margin: 0;
	width: 100%;
	height: 100%;
}

Und damit funzt es so wie es soll...

Lieben Dank für's Reinschauen ...
und LG, Karin