CSS: Wie erreiche ich, dass ein Block-Element (auch ohne weiteren Inhalt) die ganze Seite füllt?

[Matthias Scharwies]

Servus!

Hi(gh)!

Folgendes Problem: Ein

<div style="margin-left:20%; margin-right:20%; margin-top:0%; margin-bottom:0%; background-image:url(bild1.png)"> </div>

soll auch ohne weitere Inhalte über die ganze Bildschirmhöhe hinweg das sich wiederholende Hintergrundmuster anzeigen. Tatsächlich sehe ich nur einen schmalen Ausschnitt am oberen Rand von vielleicht 50 Pixeln Höhe. Warum?

Grundlegendes

Blockelemente wie div, h1, oder p nehmen ohne weitere CSS-Festlegungen die ganze Breite ein. Sie sind so hoch wie ihr Inhalt.

Also

Zuerst must du dafür sorgen, dass dein div die ganze Bildschirmhöhe einnimmt, etwa mit height:100vh.

Dann musst du Hintergrundbilder entweder passend skalieren (background-size) oder kacheln (background-repeat).

• Beispiel:CSS3_background-repeat-busy.html
  • CSS/Eigenschaften/background-repeat#Kachelung_von_Hintergrundbildern

Herzliche Grüße

Matthias Scharwies