Text zentriert über einem Bild (vert+hor)

[ak-swiff]

Hi frankx,

Ich habe ein Div das vollständig von einem Bild ausgefüllt sein soll (no-repeat).

Das wäre ein background, sonst nix no-repeat.

Ja, ich hatte u.a. auch versucht das Bild als background einzufügen, weil dann das mit dem Text darüber einfacher/wunderbar klappt.
Das background-image soll dann no-repeat sein, allerdings konnte ich dann nicht die width/height des Bildes in 100% angeben ('background-width' gibt es noch nicht), was also keine Lösung war.

Aha. wie ist denn ein div resizable?

Ich benutze die Prototype/Scriptaculous Bibliothek, damit kann man einfach resizable Elemente erstellen (es ist btw auch drag'n'droppable).

Auf/über dem Bild möchte ich Text schreiben.
Zwei Worte, untereinander, horizontal und vertical im Bild zentriert.

Wie schaffst Du denn das?

Schaff ich ja eben nicht. Aber es gibt ja diverse Möglichkeiten Text auf ein Bild zu bekommen (und auch unzählige Threads dazu, hab schon viel recherchiert...).

Mein Vorschlag: extrahiere den wesentlichen Code und poste ihn. U.u. musst Du die line-height anpassen? mach dir auch mal rahmen um die fraglichen Elemente, dann siehste mehr.

Die Rahmen lass ich mir längst anzeigen um da ein bisschen besser den Überblick zu haben, was welche Aktion bewirkt.

Also ich hab im Groben so eine Struktur:

<div>
  <img src="..." style="position:absolute; width:100%; height:100%">
  <div style="???">Wort 1 (zentrier mich) <br> Wort 2 (zentrier mich)</div>
</div>

Egal ob ich nun mit text-align, align=center, top50%, left50% oder so rumprobiere, es kommt nie das richtige dabei heraus.
Mal erscheint der Text erst nach dem Bild, mal gar nicht oder irgendwie verschoben halt.