[CSS] Transparenz - überlappende divs

[Fee]

Es geht um den Contentbereich.
So solls aussehen: https://www.imgu.de/img_37016_syi


Ich habe den Contentbereich in 3 Grafiken geschnitten. Head (da es einen Verlauf gibt), repeat-y und Foot/End.

Das Problem ist, dass die 3 Grafiken transparent sein sollen, da es auch einen Verlauf im Background der Seite gibt. Aber wenn man die 3 divs übereinander legt, funktioniert das mit der Transparenz nicht, da das eine div ja repeat-y als Eigenschaft hat.

Jetzt zur Frage: Gibts noch eine andere Möglichkeit mein Vorhaben umzusetzen? Die divs untereinander zu setzen ist hier ja auch nicht möglich, da der Kopf 496px groß ist. Wäre der nur 10px, dann wär's ja kein Problem. Aber so müsste ich ja den Inhalt des divs in 2 divs trennen, das geht aber nicht.

Hat hier jemand eine Idee?

 

[QuArK007]

Du hast ein Div "left" eingeführt, dieses aber nicht definiert... vllt solltest du da den Hintergrund transparent setzen!!

 

[Fee]

Jo, aber darum gehts doch gar nicht.

 

[Fee]

Ich habe das Problem jetzt mit einem Trick gelöst:
Die Grafik content_head.png beinhaltet jetzt nicht mehr den ganzen Kopf, sondern der Rest steckt jetzt in content2.png (jedoch ohne Rand).

Dann habe ich noch eine weitere Ebene angelegt: div#content4. Und so läuft alles:

div.content{
	width: 540px;
	background: url(images/content_head.png) no-repeat;
}
div.content2{
	background: url(images/content_end.png) no-repeat bottom left;
	padding: 25px 0 8px 0;
}
div.content3{
	background: url(images/content.png) repeat-y;
}
div.content4{
	background: url(images/content2.png) no-repeat 4px 0px;
}