[CSS]: Anfanggrafik(1x) -- Mittelgrafik(flexibel) -- Endgrafik(1x)

[ich98]

Hi,

das ist meine Seite: BlackHawk Zone

Nun seht ihr den Header (Orange) mit dem Schatten auf der rechten Seite.
Den Hintergrund vom Header hab ich mit:

background-image:url(../grafiken/schattenheader.gif);
background-repeat:repeat-y;

eingebunden.
Nun würde ich gerne, dass am Anfang (ganz oben) eine andere Grafik benutzt wird, als weiter unten.
Sprich es soll mit der "anfang.gif" los gehen und danach dann ganz normal mit der "schattenheader.gif" weitergehen.
Wie stell ich das am besten an? Ohne jetzt ein große Grafik zu erstellen, die alles beinhaltet.
Am Footer soll es dann genau umgekehrt sein.


Momentan hab ich es mit einem extra Div (beim Header) und einer großen Grafik im Footer geregelt, aber muss doch einfach gehen. Vor allem flexibler, ich will nicht bei jeder Änderung der Footerhöhe eine andere Grafik erstellen müssen.

CSS-Datei: http://www.blackhawk-zone.de/css/main.css
Gruß

 

[skicu]

Ohne, dass ich mir das jetzt genauer angesehen hab (zu großes css file ):
Suchst du sowas?

<div style="background-image:schatten.gif; z-index:100;
		background-repeat:repeat-y; float:none;">
	<div style="background-image:schattenheader.gif; z-index:200;
			background-repeat:no-repeat; float:none; height:125px;">
		 
	</div>
	
	<div style="z-index:300; float:none; min-height:400px;">
		<h1>Mein Inhalt</h1>
	</div>
	
	<div style="background-image:schattenfooter.gif; z-index:200;
			background-repeat:no-repeat; float:none; height:75px;">
		 
	</div>
</div>

 

[ich98]

Ohne, dass ich mir das jetzt genauer angesehen hab (zu großes css file ):
Suchst du sowas?

dort liegt doch jetzt der footer und der header über dem normalen Schatten.
Ich verdeutliche das mal:

Anfangsgrafik.gif (die kommt am Kopf)

schattenheader.gif (ist 1px hoch und kommt so lange, wie der Header hoch ist)

schatten.gif (für den Kontent, ist auch 1px hoch und kommt so oft wie der Content groß ist)

schattenfooter.gif (beginnt unter dem Content und bis zum footer Ende)

dort soll dann wieder der Schluss kommen, sprich:

schattenabschluss.gif


Jetzt soll aber "schattenabschluss.gif " immer unterm Footer stehen, egal wie hoch dieser ist und "Anfangsgrafik.gif" auch immer über dem Header, egal wie hoch der ist.

Muss jetzt für die beiden Enden ein einiges Div nehmen oder kann ich das irgendwie so regeln, dass ich mir die beiden "End-Divs" spare und gleichzeitig keine große und statische Grafik erstellen muss?