Mehrere Backgrounds übereinander mit Text darauf ...

[ChrisB]

Hi,

Das Problem dabei ist, dass dort noch ein Hintergrundbild hinmuss, welches den oberen Verlauf des ganzen darstellt. Auf ihm soll der Text aber schon beginnen und wenn der Text größer als 40px wird, dann soll das darunterliegende Hintergrundbild weiterlaufen.

Dann würde ich das obere Hintergrundbild in einem absolut positionierten Element unterbringen (dazu reicht ein SPAN), und dem Text-Element ggf. noch eine entsprechende Mindesthöhe geben, wenn auch bei kürzerem Text das "obere" Hintergrundbild komplett zu sehen sein soll.

<p style="position:relative; min-height:40px; background:url(bild_unten.jpg) repeat-y;">  
  <span style="position:absolute; top:0; left:0; width:100%; height:40px; background:url(bild_oben.jpg) no-repeat;"></span>  
  Lorem ipsum,blah laber sülz jodel ...  
</p>

Durch die Platzierung des SPAN vor dem Text sollte eine Angabe zum z-index eigentlich nicht mehr nötig sein; falls irgendein Browser da Mucken machen, muss ggf. der Text auch noch in ein weiteres Element gepackt werden, um auch diesem einen z-index geben zu können.

MfG ChrisB