Hintergrundbild, Farbe, Hintergrundbild

clownibobo

Hallo,

durch eine Empfehlung von einem Kollegen bin ich auf diese Forum aufmerksam geworden, nun also mein erster Beitrag

Ich bringe folgendes Problem mit:

Ich möchte gerne auf meiner Website einen Hintergrund festlegen, dieser Hintergrund besteht aus 2 Dateien und einer Farbe (damit es auf jeder Bildschirmgröße funktioniert)

Soll wie folgt aussehen: bg_oben (oben) dann die Color (black) dann der footer.

Ich habe euch die Dateien und einen Link mitgebracht, vllt. findet ja einer eine Lösung.. ich finde seit Tagen keine passende

http://feuerspringen.de/beta/
http://feuerspringen.de/beta/dateien/bg_oben.jpg
http://feuerspringen.de/beta/dateien/bg_unten.jpg

grüße clownibobo und schon mal danke falls einer eine idee hat.

lukasn

Hier mal ein grundsätzlicher Ansatz, braucht wahrscheinlich noch etwas Arbeit um in älteren Versionen des IE zu funktionieren.

Code

html {
	height: 100%;
	background: #000 url('bg_oben.jpg') top left repeat-x;
}
body { 
	height: 100%; 
	background: transparent url('bg_unten.jpg') bottom left repeat-x;
}

Das geht davon aus dass die Hintergrundbilder nahtlos sind. Sollte das nicht der Fall sein (wie z.B. momentan noch bei bg_unten.jpg) kannst du statt "left repeat-x" "center no-repeat" bei beiden verwenden. Sollte dann aber an den Seiten auch schön ins Schwarz fliessen.

Hiffe das hilft,
-Lukas

clownibobo

vielen dank für deine hilfe, habs mal gemacht...

passiert folgendes..: http://feuerspringen.de/beta/

soweit so gut.. ich hätte gerne das der bg_unten wirklich auch "unten" ist.. wenn man jetzt scrollt kommt unten dann noch schwarz und bg_oben ist ziemlich "klein" von der höhe... noch ne idee?

lukasn

Whoops, sorry, bei body sollte das min-height sein, also so:

Code

html {
	height: 100%;
	background: #000 url('bg_oben.jpg') top left repeat-x;
}
body { 
	min-height: 100%; 
	background: transparent url('bg_unten.jpg') bottom left repeat-x;
}

Aber wie schon gesagt, die Lösung ist ungeprüft, kann mir gut vorstellen dass es in einigen Browsern Probleme gibt, kann es von hier aber nicht testen. Ältere Versionen des IE machen z.B. Probleme mit min-height.

Wenn das Fenster zu klein ist wird der bg_unten übrigens über bg_oben geschoben was ziemlich hässlich ist, der Hintergrund im Bild sollte vielleicht besser Transparent sein.

clownibobo

mhh.. leider nichts verändert.. würdest du es dir mal ansehen wollen? ich komme so leider nicht weiter..würde mich entsprechend bedanken..

lukasn

Sorry, heute nicht mehr. Aber anstatt meiner Lösung kannst du dir mal Sticky Footer-Lösungen anschauen, die sollten sich für deine Zwecke eigentlich auch eignen.

http://ryanfait.com/sticky-footer/
http://www.cssstickyfooter.com/

clownibobo

danke für deine Mühe.. leider hab ich nach einigen Stunden probieren nun aufgeben.. bin nicht weitergekommen..

CookiePick95

Versuch es doch mal mit zwei div-Containern. Setzte die Höhe von dem jeweiligen Bild und mach das Bild als background rein. Dann den unteren div-Container für den Footer-BG mit

HTML

bottom: 0;

unten anheften und den oberen mit

HTML

top: 0;

ganz oben anheften.
Anschließend müsstest du einfach noch zu den beiden Bildern einen negativen z-index hinzufügen. Z.B.

HTML

z-index: -90;

Hoffe, dass das so klappt wie mir das gerade durch den Kopf geht. Wenn nicht, dann kann ich mich ja mal ran setzen und dir das ganze fertig machen. Aber probiere es lieber erstmal alleine, denn so kannst du das beim nächsten Mal

Tags