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

[Yadgar]

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?

Bis bald im Khyberspace!

Yadgar

[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

[Yadgar]

Hi(gh)!

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

Was bedeutet "vh"? Ist % deprecated?

Bis bald im Khyberspace!

Yadgar

[Gunnar Bittersmann]

@@Yadgar

Was bedeutet "vh"?

1% der Viewport-Höhe. Siehe relative Längenmaße

Ist % deprecated?

Nein. Es hilft dir hier bloß nicht.

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar Bittersmann,

Es hilft dir hier bloß nicht.

Wenn man für das :root-Element ebenfalls 100% gesetzt hat, schon. Hab ich früher™️ immer gemacht, bevor ich vh kannte.

Mit vh ist einfacher. Aber die margin/padding-Einflüsse der Elternelemente können immer noch störende Scrollbalken auslösen. Deswegen ist die Größenbestimmung "von außen nach innen" mit Hilfe von Grids am elegantesten. Find ich…

Rolf

[Gunnar Bittersmann]

@@Rolf B

Es hilft dir hier bloß nicht.

Wenn man für das :root-Element ebenfalls 100% gesetzt hat, schon.

Wenn da nicht zwischen :root und der „100%igen Box“ nicht noch ein anderes Element ist, auf das sich die Prozentangabe dann bezieht.

Mit vh ist einfacher.

Und sicherer.

Man sollte sich bloß fragen, ob man nicht (auch) lvh oder svh angeben will.

Aber die margin/padding-Einflüsse der Elternelemente können immer noch störende Scrollbalken auslösen.

Aber man hat doch als allererstes

*, ::before, ::after { box-sizing: border-box }

in seinem Stylesheet zu stehen‽ 😏

🖖 Живіть довго і процвітайте

[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

[Der Martin]

Hallo Rolf,

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.

das ist keine exakte Antwort auf die ursprüngliche Frage - aber warum sollte man da nicht einfach ein Element auswählen, das sowieso den ganzen Browserbereich ausfüllt? Ich würde hier einfach dem html-Element das Hintergrundbild zuweisen.

Einen schönen Tag noch
 Martin

[Rolf B]

Hallo Martin,

das Root-Element und der body haben, soweit ich das finden konnte, besondere Darstellungsregeln. Ihr Hintergrund füllt den Viewport aus.

Da Yadgar einen Margin setzt, scheint mir das hier nicht gewollt.

Rolf

[Gunnar Bittersmann]

@@Rolf B

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?

Nein; es hat Inhalt: das, was zwischen <div style="…"> und </div> steht.

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar Bittersmann,

jaaaa, ok, aber im OP ist das nur Leerraum. Und der wird, sofern keine CSS Eigenschaften da sind, die etwas anderes festlegen, nicht gerendert.

Ich korrigiere also: „Wenn kein Inhalt drin ist, der die Höhe beeinflusst“...

Rolf

[Gunnar Bittersmann]

@@Rolf B

jaaaa, ok, aber im OP ist das nur Leerraum. Und der wird, sofern keine CSS Eigenschaften da sind, die etwas anderes festlegen, nicht gerendert.

Stimmt.

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Yadgar

Ich hab vor einiger Zeit mal so’n Dingens gebaut, dass nicht nur eine Box mit 100vh Höhe hat, sondern vier davon.

🖖 Живіть довго і процвітайте

[Matthias Scharwies]

Servus!

@@Yadgar

Ich hab vor einiger Zeit mal so’n Dingens gebaut, dass nicht nur eine Box mit 100vh Höhe hat, sondern vier davon.

🖖 Живіть довго і процвітайте

Sieht gut aus!

(Müsstest du da nicht noch hinzufügen: "Näheres wird durch Gesetz geregelt!")

Herzliche Grüße

Matthias Scharwies