CSS Bild hinter Text auf Textgröße strecken

[Maik1]

Hallo,
und zwar habe ich einen Text. Hinter diesen Text soll ein Bild, das sich automatisch an die Größe des Textes anpasst. Ich probiere schon seit Stunden rum, aber es kommt nicht das richtige bei raus.

<div >
	<img src="images/bild.png" style="z-index:0; position: absolute;">
	<div style="z-index:1; position: relative;">Text</div>
</div>

Ich hoffe ihr könnt mir helfen.

 

[Crizzo]

Gib doch einfach dem <div>, welches als Inhalt den Text hat, das Bild als Hintergrundbild und fertig.

 

[Maik1]

Aber dann wird es doch nur gekachelt dargestellt, bzw. nur einmal in Originalgröße. Ich möchte es aber strecken.

 

[Crizzo]

Auch wenn es nicht gut aussieht, dann mach es so:

<div style="position:relative; width:500px; height:500px;">
	<img src="images/bild.png" style="width:100%; height:100%; position:absolute; left:0; top:0; z-index:1;">
	<div style="z-index:2; position: relative;">Text</div>
</div>

 

[Maik1]

Hm, so gänge es, wenn die Website nicht dynamisch wäre.
Anstelle des Textes werden Texte aus einer Datenbank abgerufen, die immer wieder variieren. Deswegen ist es keine richtige Lösung mit den festen Größen.

Wie kann ich es machen, das sich das Bild immer auf die Länge des Textes ändert.

 

[Darii]

Bleibt dir wohl nur ein Hintergrundbild in Kombination mit background-size(CSS3, also läuft noch fast nirgends) oder eine echt garstige Javascript-Lösung.

 

[Crizzo]

Hast du die festen Größen mal rausgenommen und geschaut was passiert?