Text als Hintergrund

Hallo,

ich habe folgendes HTMLs Layout:

<div>
	<dl>
		<dd style="float:left; width: 200px;"></dd>
		<dd style="float:left; width: 200px;"></dd>
		<dd style="float:left; width: 200px;"></dd>
	</dl>
</div>

Die <dd> bekommen per CSS noch ein Hintergrundbild zugewiesen. Ich möchte nun aber noch einen Text in den Hintergrund jedes DD-Elementes geben. Die <dd>-Elemente werden anschließend auch noch mit Text befüllt.

Klar könnte man sagen, dass ich den Hintergrundtext doch einfach in das vorhandene Hintergrundbild integrieren könnte. Das Problem ist aber, dass sich der Text je nach User ändern kann, also sehr variable sein kann und ich nicht rund 50 Bilder erstellen will.

Gibt es da eine elegantere Lösung?

Gruß Tarlar

Der HTML-Code sieht kaputt aus. Ein <dd> ergibt ohne <dt> keinen Sinn.

Du kannst es dir auch als <ul> / <li> Liste vorstellen. Das ändert allerdings an meinem Problem nichts

So weit ich das überblicke, musst du ziemlich herumpfuschen. Also mit :before oder :after, inklusive eines eigenen Element sowie Angaben zu position und z-index. Imho solltest du dein Konzept überdenken.

Peter

Ich hab es nun so gelöst:

<li>
	<div style="height: 150px;">
		<div style="height: 150px;">
			Hier steht der Hintergrundtext
		</div>
		<div style="position: relative; top: -150px;">
			Hier kommt der Inhalt hin.
		</div>
	</div>
</li>