CSS: Wie erreiche ich, dass ein Block-Element (auch ohne weiteren Inhalt) die ganze Seite füllt? bearbeitet von Matthias Scharwies 23.01.2023 05:24 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](https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:CSS3_background-repeat-busy.html#view_result) - [CSS/Eigenschaften/background-repeat#Kachelung_von_Hintergrundbildern](https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/background-repeat#Kachelung_von_Hintergrundbildern) Herzliche Grüße Matthias Scharwies -- Eigentlich hatte ich heute [viel vor](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) - jetzt habe ich morgen viel vor!
CSS: wie erzeuge ich einen Bereich mit Hintergrundbild, der auch ohne weiteren Inhalt die ganze Seite ausfüllt? bearbeitet von Matthias Scharwies 23.01.2023 06:33 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? > 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](https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:CSS3_background-repeat-busy.html#view_result) - [CSS/Eigenschaften/background-repeat#Kachelung_von_Hintergrundbildern](https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/background-repeat#Kachelung_von_Hintergrundbildern) Herzliche Grüße Matthias Scharwies -- Eigentlich hatte ich heute [viel vor](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) - jetzt habe ich morgen viel vor!
nicht angemeldet
