dynamischer Hintergrund je nach Seitenlänge

[SeriousToni]

Hallo Community,

ich würde gerne mal meine steinalte Homepage auf Vordermann bringen und fange dabei wieder mehr oder weniger bei Null an.

Ich habe schon oft gesehen, dass manche Pages in 3 Zonen aufgeteilt sind (siehe Bild-Link). Zone 1 ist ein Farbverlauf mit fester Größe (z.B. 300x300 px) Zone 3 ebenfalls. Zone 2 wird um so größer, je mehr Text auf der Seite steht. D.h. Zone 3 verschiebt sich automatisch nach unten, immer bis zum Seitenende.

Anfangs wollte ich das einfach so realisieren, dass Zone 1 und 3 aus je einem Bild bestehen und der Rest einfach Hintergrund Farbe ist (also Zone 2) aber damit hätte das Browserfenster ja keine variable Breite mehr, denn diese wird durch die Bilderbreite ja vorgegeben.

Wie wird so etwas umgesetzt? Geht das iwie mit JavaScript vielleicht?

 

[JBKING]

AW: dynamischer Hintergrund je nach Seitenlänge

Edit: Sorry das was jetzt rot ist geht nicht (ich sollte mal zu ende lesen)

Ich würde Zone 1 + 3 mit den CSS-Atributen versehen:

 position: fixed;

und je nachdem

top: 0px;

oder

bottom: 0px;

Desweitern könntest du mit Prozentualen angaben bei der höhe des mittleren Objektes arbeiten.

JS ist nicht so gut aber wenn dus trotzdem machen willst würde ich mir mal

getElementByID

angucken und die Fenstergröße abfragen.

MfG

 

[SeriousToni]

AW: dynamischer Hintergrund je nach Seitenlänge

Was wären denn die Zonen für dich? Einfach jpg Bilder?

Also meinst du ich soll bei Zone 2 das einfarbige Bild strecken (prozentual)
und die Bilder für 1 und 3 je nachdem oben und unten fest positionieren, wenn ich das richtig verstehe.

Und wegen der Breite?

 

[AlexanderBo]

AW: dynamischer Hintergrund je nach Seitenlänge

braucht kein java ;-)

gesamte breite kann man heut mit <=1000px machen.

fenster 1 mit grafik 1px x 300px
background-image: url(../images/obennachuntenverlauf.jpg);
background-repeat:repeat-x;

fenster 3 ditto nur
background-image: url(../images/untennachobenverlauf.jpg);
background-repeat:repeat-x;

edit:
wenn fenster 1 und 3 ne feste höhe von 300 = 600px haben
bleibt für den content in 2 ja nich viel platz...
also fenster 1 und 3 weniger höhe (header footer)

mach dich mit html und css vertraut

 

[Crackp0t]

AW: dynamischer Hintergrund je nach Seitenlänge

Setze den Header und Footer auf Width 100%, kombiniert mit einem 1 mal X Pixel großem Hintergrundbild welches du auf der X-Achse widerholst(Ansatz wurde im Post über mir gegeben). So wird bei jeder Breite des Viewports der DIV mit dem Verlauf gefüllt.

Aber mal ne Frage: Findest du einen Verlauf als Hintergrund wirklich so schick? Bedenke, dass der Verlauf nicht überall so aussieht wie bei dir.