Hinzergrundgrafik auf Viewportbreite skalieren

[JürgenB]

Hallo,

ich möchte ein quadratisches Hintergrundbild auf die Breite des Viewports anpassen. Dabei soll das Aspektverhältniss beibehalten werden. Ich habe dieses dadurch realisiert, dass ich das Bild mit Breite 100% in ein Div mit Breite 100% gelegt habe und das Ganze per Z-Index in den Hintergrund schiebe.

Versuch 1

Leider habe ich jetzt das Problem, dass das Bild die Seitenhöhe bestimmt und ich auch Scrollbalken erhalte, wenn es der eigentliche Inhalt nicht erfordert.

Daher habe ich dem das Bild umschließenden DIV noch die Höhe 100% gegeben sowie overflow:hidden:

Versuch 2

Leider wird jetzt, wenn der Inhalt scrollen erfordert, das Bild auf Viewporthöhe abgeschnitten.

Nun meine Frage:

Gibt es im CSS die Möglichkeit, die durch den Inhalt bedingte Höhe der Seite abzufragen? height:100% bezieht sich ja auf die Viewporthöhe.

CSS Version 1

    #bgd {  
      position:absolute;  
      left:0;top:0;  
      z-index:-1000;  
      width:100%;  
    }  
    #bgd img {  
      width:100%;  
      padding:0;margin:0;  
    }

CSS Version 2
    ~~~css #bgd {
      position:absolute;
      left:0;top:0;
      z-index:-1000;
      width:100%;height:100%;
      overflow:hidden;
    }
    #bgd img {
      width:100%;
      padding:0;margin:0;
    }

  
HTML  
  `<div id="bgd"><img src="bg.png" alt="" /></div>`{:.language-html}  
  
  
Gruß, Jürgen