Mehrere Backgrounds übereinander mit Text darauf ...

[Jörg]

Hallo Gemeinde,

bin hier so langsam am verzweifeln ..
Folgendes möchte ich realisieren:

ich habe 2 Bilder, die übereinander liegen. Das Obere ist ein Verlauf mit einer konstanten Größe von 60px.
Darunter soll der Rest von dem "Verlauf" endlos weitergeführt werden (je nachdem, wie lang der Text ist, der noch kommt).
Das Besondere daran ist, dass der Text schon beim oberen Background anfangen soll und dann nach unten hin theoretisch endlos auslaufen kann, wobei das untere Bild mitgeht.
Hoffe, ich habe das deutlich genug ausgedrückt ...

Hier mein Versuch:

<div style="position: absolute; left: 50px; top: 0px; width: 500px; background: url(bild_unten.jpg) repeat-y;">  
		<div style="height: 40px; background: url(bild_oben.jpg) no-repeat;">  
	              Hier der Text		  
		</div>  
	</div>

Nach meinem Verständnis, sollte zunächst mal der Endloshintergrun (bild_unten.jpg) eingebunden werden. Darauf kommt nun das Bild mit der festen Größe (bild_oben.jpg). Darin befindet sich nun der Text. Doch das Endlosbild geht nicht automatisch mit dem Text mit, obwohl dieser mit in dem obersten DIV Tag steht...

Ich hoffe, dass ihr mir irgendwie weiterhelfen könnt und ich mich klar genug ausgedrückt habe ;)

MFG Jörg.

[Malcolm Beck´s]

hi,

<div style="position: absolute; left: 50px; top: 0px; width: 500px; background: url(bild_unten.jpg) repeat-y;">

  <div style="height: 40px; background: url(bild_oben.jpg) no-repeat;">  

Hier der Text
</div>
</div>

  

> Ich hoffe, dass ihr mir irgendwie weiterhelfen könnt und ich mich klar genug ausgedrückt habe ;)  
  
Gebe dem ersten div einen Border und schau, ob dieser mitwächst.  
  
 ~~~html
<div style="position: absolute; left: 50px; top: 0px; width: 500px; background: url(bild_unten.jpg) repeat-y;border:1px solid #000;">  
 		<div style="height: 40px; background: url(bild_oben.jpg) no-repeat;">  
 	              Hier der Text		  
 		</div>  
 	</div>

Wenn nein, bist du hier auf einen der vielen Nachteile von position:absolute; gestossen, die übrigens in den meisten Fällen überflüssig sind.

mfg

[Malcolm Beck´s]

hi,

ich muss mich korrigieren:

<div style="position: absolute; left: 50px; top: 0px; width: 500px; background: url(bild_unten.jpg) repeat-y;border:1px solid #000;">

  <div style="height: 40px; background: url(bild_oben.jpg) no-repeat;">  

Hier der Text
</div>
</div>

  
Warum bekommt das innere div eine feste höhe zugewiesen, wenn Variabler Text drin vorkommen kann?  
  
mfg

-- 
[Word!](http://www.youtube.com/watch?v=8IYTxTeMzA0) -- [Wenn man genauer hinschaut ist Deutschland schon ganz in Ordnung](http://www.youtube.com/watch?v=MeNdOpw90-M&feature=SeriesPlayList&p=917773458BC1E8DD)

[Jörg]

hi,

ich muss mich korrigieren:

<div style="position: absolute; left: 50px; top: 0px; width: 500px; background: url(bild_unten.jpg) repeat-y;border:1px solid #000;">

  <div style="height: 40px; background: url(bild_oben.jpg) no-repeat;">  
              Hier der Text		  
  </div>  
</div>

>   
> Warum bekommt das innere div eine feste höhe zugewiesen, wenn Variabler Text drin vorkommen kann?  
>   
> mfg  
  
  
Hallo und danke für die Antworten!  
  
wie oben geschrieben, soll der text auf dem variablen Hintergrund erscheinen und mitwachsen.  
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.  
Wüsste nicht, wie ich das anders darstellen sollte ....

[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

[MudGuard]

Hi,

  <div style="height: 40px; background: url(bild\_oben.jpg) no-repeat;">  

Das Problem dabei ist, dass dort noch ein Hintergrundbild hinmuss, welches den oberen Verlauf des ganzen darstellt.

Nein, das Problem ist, daß Du die Höhe des inneren divs festnagelst.

Laß die Höhenangabe weg und positioniere das Hintergrundbild ganz oben.

cu,
Andreas

[MudGuard]

Hi,

<div style="position: absolute; left: 50px; top: 0px; width: 500px; background: url(bild_unten.jpg) repeat-y;">

  <div style="height: 40px; background: url(bild_oben.jpg) no-repeat;">  

Hier der Text
</div>
</div>

  
Das äußere div wird wegen fehlender Höhenangabe (also effektiv height:auto) so hoch wie sein Inhalt. Der Inhalt hat eine Höhe von 40px.  
  
Paßt der Text nicht in diese Höhe, wird er (wegen default-Wert visible für overflow) über das innere (und damit auch das äußere) div hinausgehend dargestellt.  
  
cu,  
Andreas

-- 
[Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/)  
[O o ostern ...](http://ostereier.andreas-waechter.de/)  
  
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.