Gast: Vollflächiges Hintergrundbild

Beitrag lesen

SELF-Forum

Vollflächiges Hintergrundbild

Gast
– Informationen zu den Bewertungsregeln

Hallo,

dein Beispiel ist ja recht wirre und zum Lernen nicht geeignet.

Das Prinzip ist einfach: Du stellst ein Bild auf die Seite, das 100% Höhe und 100% Breite der Seite hat. Das bedeutet, dass die Seitenverhältnisse unbestimmt sind. Aber bei einem Himmel mit Wolken fällt das nicht auf.

Dann musst du dafür sorgen, dass dieses Bild fixiert bleibt, auch wenn die Seite gescrollt wird. Sonst würde das Bild ja mitgescrollt und verschwindet.

#fix_body {  
  position: absolute;  
  left:     0;  
  right:    0;  
  top:      0;  
  bottom:   0;  
  display:  block;  
  z-index:  1;  
}  
html>body #fix_body {position:fixed}  


<body>  
<div id='fix_body'>  
  <img src='fotos/himmel.jpg' style='width:100%; height:100%' alt=Himmel>  
</div>  
<div style="z-index:2">  
  <!-- hier der HTML Code der Seite -->  
</div>  
</body>

Durch das Attribut absolute (oder bei aktuellen Browsern fixed) geht es danach oben auf der Seite weiter. Es muss dafür gesorgt werden, dass die restliche Seite ncht unter dem Bild verschwindet, deshalb z-index:2 (höher als der des Bildes).

Gruß, Gast

Beitrag melden
–
Informationen zu den Bewertungsregeln