CSS: wie erzeuge ich einen Bereich mit Hintergrundbild, der auch ohne weiteren Inhalt die ganze Seite ausfüllt?

[Rolf B]

Hallo Yadgar,

ein <div style="..."></div>

Verwende Stylesheets für sowas. Keine style-Attribute. Es sei denn, du hast einen SEHR guten Grund dafür.

soll auch ohne weitere Inhalte über die ganze Bildschirmhöhe hinweg

Wie Matthias schrub: Dazu musst Du ihm sagen, dass es die Bildschirmhöhe einnehmen soll. height:100vh ist ein Weg dafür. Da das body-Element aber vom Browser aus einen Margin hat, führt die Angabe von 100vh bei einem Kindelement des Body zu einem vertikalen Scrollbar. Du müsstest die Höhe des div um margin-top und margin-bottom des Body reduzieren.

Ich persönlich greife dann gerne zum Grid-Layout und definiere für den kompletten Body ein Grid. Dem Margin ersetze ich durch ein Padding und kann dadurch ohne Rechnerei eine Höhe von 100vh setzen.

Auch in einem Grid kann man dafür sorgen, dass sich Dinge überlappen. Ein Grid für ein Standard-Seitenlayout kann so aussehen.

body {
   margin: 0 auto;
   height: 100vh;
   max-width: 50em;   /* beispielsweise */
   padding: 8px;

   display: grid;
   grid-template: "header header header" auto 
                  "nav    main   info"   1fr
                  "footer footer footer" auto 
                / auto 1fr 10em;
}               

Man kann außer den benannten Bereichen aber immer noch frei platzieren, z.B. so:

div {   /* Dein Wunsch-DIV */
   grid-area: 1 / 1 / -1 / -1;  
   background-image: url(...);
   z-index: -1;      /* damit es im Hintergrund liegt */
}

Diese grid-area Angabe lässt das div das komplette Grid füllen.

• Erster Wert: Beginne ab dieser Zeile (obere Kante des Grid)
• Zweiter Wert: Beginne ab dieser Spalte (linke Kante des Grid)
• Dritter Wert: Ende vor dieser Zeile (negative Werte zählen von unten an)
• Vierter Wert: Ende vor dieser Spalte (negative Werte zählen von unten an)

grid-area kann noch viel mehr, das guckst Du Dir besser im Selfwiki an.

Wenn das div das erste Element im Body ist, wird es im Hintergrund liegen. Oder Du gibst ihm einen negativen z-index.

das sich wiederholende Hintergrundmuster anzeigen.

background-repeat: repeat ist der Default. Wenn es sich bei Dir nicht wiederholt, hat eine andere CSS Regel das abgeschaltet. Versuche, das mit dem Seiteninspektor herauszufinden.

Tatsächlich sehe ich nur einen schmalen Ausschnitt am oberen Rand von vielleicht 50 Pixeln Höhe

Dann ist das die aktuelle Höhe deines div. Wenn kein Inhalt drin ist - hat es vielleicht ein Padding?

Rolf