Hinzergrundgrafik auf Viewportbreite skalieren

[JürgenB]

Hallo ChrisB,

Folgendes funktioniert nach meinem Test im Firefox wie gewünscht:

• margin/padding von HTML und BODY eliminieren,
• HTML auf 100% Höhe setzen,
• BODY auf Mindesthöhe von 100%, position auf relative.
• Bild-DIV absolute positionieren, wird dann an BODY ausgerichtet. Höhe nicht explizit vorgeben, sondern top und bottom auf 0 setzen; overflow auf hidden.
• Bild im DIV dann noch auf 100% Breite setzen; für Höhe keine Vorgabe machen.

vielen Dank. Auf "BODY auf Mindesthöhe von 100%, position auf relative." bin ich nicht gekommen.

Version 3

und das CSS

    html {  
      margin:0;padding:0;  
      height:100%;  
    }  
    body {  
      background-color:#fff;  
      position:relative;  
      margin:0;padding:0;  
      min-height:100%;  
    }  
    #bgd {  
      position:absolute;  
      left:0;top:0;bottom:0;  
      z-index:-1000;  
      overflow:hidden;  
    }  
    #bgd img {  
      width:100%;  
      padding:0;margin:0;  
    }  
    #inhalt {  
      margin:0;  
      padding:200px 20px 20px 20px;  
      color:black;  
    }  

Ggf. muss dann noch der Effekt von adjoining margins ausgeglichen werden, wenn der erste Inhalt im BODY dafür sorgt, dass dieser implizit ein margin-top bekommt.

ich habe jetzt alle Margins auf 0 gesetzt und statt dessen Padding genommen. Gibt es da noch eine bessere Lösung.

Gruß, Jürgen