Layer vertikal auf 100% positioniert

[marco]

Hallo zusammen.

Folgendes. Ich habe einen div Layer. Dieser soll immer sichtbar sein und immer (vertikal) den ganzen Screen ausfüllen.

Gemacht habe ich folgendes.

position:absolute;
top:0px;
bottom:0px;

Das funktioniert auf den ersten Blick. Jedoch, wenn die Seite größer als der Bildschirm ist, und man scrollen muss, dann merkt mann, dass sich der Layer nicht immer den ganzen Screen ausfüllt, sondern aufhört.

Das Beispiel findet ihr unter
www.neulicht.de/projekt/sack/kuenstlerin.html

Hat jemand eine Idee, wie ich das lösen kann?
Bin für Hilfe dankbar.

[Tobias Müller]

Hallo,

Hat jemand eine Idee, wie ich das lösen kann?
Bin für Hilfe dankbar.

Lös das mit einem Hintergrund in dem selben Rot. 1px hoch und eben so breit wie der rote Balken sein soll. Dann noch ein repeat-y dazu und das Ergebnis schmeckt perfekt. ;)

MfG Mülli

[Tobias Müller]

Hallo,

Lös das mit einem Hintergrund in dem selben Rot.

Ich meinte natürlich Hintergrund-BILD.

MfG Mülli

[marco]

Hallo Tobias.

Danke für die Antwort. Ich verstehe aber nicht ganz. Die Länge der Seite ist doch variabel. Ich kann doch nicht für jede Seite ein unterschiedlich hohes Hintergrundbild generieren. Außerdem scaliert jeder Browser verschieden.

?

marco

[Tobias Müller]

Hallo Marco,

Danke für die Antwort. Ich verstehe aber nicht ganz. Die Länge der Seite ist doch variabel. Ich kann doch nicht für jede Seite ein unterschiedlich hohes Hintergrundbild generieren. Außerdem scaliert jeder Browser verschieden.

Du generierst ja nicht jedesmal ein neues Hintergrundbild, sondern du erstellst einmal ein Gif, das genau die Farbe des roten Balkens am linken Rand hat. Dieses Gif ist 1Pixel hoch und so breit wie eben dieser rote Balken momentan ist.

Dann bindest du das Bild folgendermaßen ein:

body {
background-image:url(hintergrund.gif);
background-repeat:repeat-y;
}

Damit wird das Bild vertikal soweit wiederholt wie man die Seite nach unten scrollen kann.

MfG Mülli

[marco]

Damit wird das Bild vertikal soweit wiederholt wie man die Seite nach unten scrollen kann.

Funktioniert wieder nicht. Ich denke, das Problem ist, dass die div Layer, welcher den Inhalt trägt, wiederum ein eigener ist, der unabhängig vom roten Farbbalken ist.

[Tobias Müller]

Hallo,

Funktioniert wieder nicht. Ich denke, das Problem ist, dass die div Layer, welcher den Inhalt trägt, wiederum ein eigener ist, der unabhängig vom roten Farbbalken ist.

Das Hintergrund-Bild muss natürlich in den Body. Dein Stylesheet für den Body sollte dann so aussehen:

body {
 font-family: Helvetica, sans-serif;
 margin:0px;
 padding:0px;
 background-color:#ffffff;
 background-image:url(deinHintergrundBild.gif);
 background-repeat:repeat-y;
}

Das MUSS einfach funktionieren! :)

MfG Mülli