3 Hintergrundbilder auf bestimmte Weise angeordnet. Wie gehts?

Chaz0r

Grünschnabel
Moin,

da für unser Uni-Projekt ein Gruppenmitglied, was für CSS zuständig war, ausgefallen ist, muss ich das übernehmen und mir in kürzester Zeit aneignen. Allerdings hab ich absolut keinen Plan.

Ziel ist, dass ich quasi vom Layout her eine Seite habe, die den Header immer oben anzeigt und eine Fußzeile immer unten. Die Mitte, muss so variable einen Repeat enthalten. Der Text wird nur in der Mitte stehen, heisst ich hab oben meinen Header, in der Mitte den Text mit einem Hintergrund, der repeatet wird, damit dieser Hintergrund über den ganzen Text geht und unten zum Abschluss eine Fußzeile.

Hoffe es kommt rüber, was ich meine.

Wie genau setze ich das in der CSS-Datei um und wie muss ich das dann in der HTML-Datei deklarieren?
Ich hab schon einige Sachen probiert, aber irgendwie funktioniert das nie so, wie ich will.

Danke in Voraus!
 
Hi,

ne Lösung für alle (alten) Browser fällt mir da nicht ein, mit CSS3 ist das jedoch kein Problem:
CSS:
body{
	background: url(top-image.png) repeat-x top center, url(bottom-image.png) repeat-x bottom center, url(main-image.png) repeat center center;
}
das einzige worauf du achten musst: die Deklaration für das bottom-image kommt vor der des main-image. Dass muss so sein, damit es nicht überschrieben wird.
Die 3 Dateinamen musst du natürlich noch ersetzen, ansonsten müsste es aber so klappen.

Zum testen keinen lehren body verwenden, ansonsten sieht man nicht richtiges...

javaDeveloper2011
 
Hey Chaz0r,

wenn ich dich richtig verstehe brauchst du den repeat nur in der Mitte oder? Dann müsstest du den CSS Code etwas abwandeln:
CSS:
body{
    background: url(top-image.png) no-repeat top center, url(bottom-image.png) no-repeat bottom center, url(main-image.png) repeat center center;
}
 
Zurück