background-image -> background-width ?

[ak-swiff]

Hi,

ich möchte Text auf ein Bild schreiben.
Eine Möglichkeit hierfür ist ja das Bild als Hintergrund z.B. eines DIV anzugeben.
Nun möchte ich die Eigenschaft 'no-repeat' und das Bild soll zentriert sein und das div immer exakt voll ausfüllen (das div ist 'resizable').
Gibt es sowas wie 'background-width' das ich auf 100% setzen kann?

[Pork im Ork]

Gibt es sowas wie 'background-width' das ich auf 100% setzen kann?

Warum schaust Du nicht selber nach?

[ak-swiff]

Warum schaust Du nicht selber nach?

Hab ich ja. Auf selfhtml.org. Da steht ja so ziemlich das gleiche.
Also antwort: nein??

Deshalb frag ich ob da irgendjemand ne Lösung kennt. Muss doch möglich sein oder??

[Glory]

Warum schaust Du nicht selber nach?

Hab ich ja. Auf selfhtml.org. Da steht ja so ziemlich das gleiche.
Also antwort: nein??

Ja.

Deshalb frag ich ob da irgendjemand ne Lösung kennt. Muss doch möglich sein oder??

Mit CSS 3 schon, aber in der aktuellen Version gibt es (zum Leid vieler Webdesigner(sic)) leider keine Möglichkeit dazu.
Einzige alternative wäre ein entsprechend platziertes <img>. Diesem kannst du dann auch Breite in Prozent zuweisen. Oder aber, du erstellst eine Grafik, die größer als das <div> ist und an den Rändern abgeschnitten wird, falls das eine Alternative für dich ist.

[ak-swiff]

Einzige alternative wäre ein entsprechend platziertes <img>. Diesem kannst du dann auch Breite in Prozent zuweisen.

Ne Alternative brauch ich dann auf jeden Fall.
Was gibt es denn noch für Möglichkeiten Text auf ein Bild zu schreiben?

also das hier klappt ja nicht (oder war ich zu doof?):
<img src....>
<div>Text</div>
</img>

Also das hier wäre dann nun meine Ausgangslage für das resizable-image (so brauch ich's für meine Zwecke):

<div>
<img src="..." style="witdh:100%; height:100%;" alt="">
</div>

Bekomme ich da noch Text hinein/auf's Bild?

[Harlequin]

Yerf!

<div>
<img src="..." style="witdh:100%; height:100%;" alt="">
</div>

Bekomme ich da noch Text hinein/auf's Bild?

<div style="position:relativ;">
<img src="..." style="witdh:100%; height:100%;" alt="">
<div style="position:absolute;top:0;left:0;">TEXT</div>
</div>

So sollte es gehen. Das Aüßere Div wird durch position:relativ zum Bezugspunkt für die innere Positionierung. Die Styles sollten allerdings noch nach Möglichkeit in ein externes CSS ausgelagert werden, aber das Prinzip sollte klar werden.

Gruß,

Harlequin

[Pork im Ork]

<div style="position:relativ;">

So sollte es gehen. Das äußere Div wird durch position:relativ

CSS spricht (leider) kein Deutsch.

[Harlequin]

Yerf!

<div style="position:relativ;">

So sollte es gehen. Das äußere Div wird durch position:relativ

CSS spricht (leider) kein Deutsch.

Ups... aber ist vielleicht auch besser so ;-)

Das soll dann natürlich position:relative heißen.

Gruß,

Harlequin

[ak-swiff]

CSS spricht (leider) kein Deutsch.

Ups... aber ist vielleicht auch besser so ;-)

Das soll dann natürlich position:relative heißen.

Danke soweit, das hätt' ich sogar noch gemerkt, der Fehler is mir schon zu oft unterlaufen :-)

Nun würd ich meinen Text auf dem Bild gerne zentrieren.
Ich benutze allerdings kein div sondern zwei <p>-tags.
Hab schon alles mit 'align', 'text-align', margin und padding versucht aber es will nicht klappen...

[Harlequin]

Yerf!

Nun würd ich meinen Text auf dem Bild gerne zentrieren.
Ich benutze allerdings kein div sondern zwei <p>-tags.
Hab schon alles mit 'align', 'text-align', margin und padding versucht aber es will nicht klappen...

Vermutlich fehlt es den Absätzen noch an entsprechender Breite (positionierte Elemente verhalten sich da anders, als Elemente im Fluss). Gib den <p>s doch mal einen Rahmen, dann müsste es deutlich werden.

Gruß,

Harlequin

[ak-swiff]

Vermutlich fehlt es den Absätzen noch an entsprechender Breite (positionierte Elemente verhalten sich da anders, als Elemente im Fluss). Gib den <p>s doch mal einen Rahmen, dann müsste es deutlich werden.

Also jetzt hab ich mal um das zu vereinfachen ein <div> um die <p>s gelegt (und die <p>s entfernt und durch ein <br> ersetzt).
Nun kann ich aber mein neues inneres Div immer noch nicht zentrieren. Und es passt sich nicht automatisch der Größe (breite) der Texte an (sind nur zwei Wörter untereinander).
Dann hab ich halt mal das innere div width und height 100% gesetzt, quasi zentriert also. Dann is natürlich mein text darin nicht zentriert...

Dann einfach das nun quasi unnötige innere div wieder entfernt.
Jetzt erscheint der Text unterhalb des Bildes und nicht darauf.
Trotz:
{position:absolute; text-align:center; vertical-align:middle;}

Also vertical-align hat bei mir noch nie, in keinem Fall eine Wirkung gezeigt.
BTW, wie setzt man dass denn über den DOM?
denn element.style.vertical-align = "geht ja nich";

[Harlequin]

Yerf!

Also vertical-align hat bei mir noch nie, in keinem Fall eine Wirkung gezeigt.

Das wirkt nur bei Tabellenzellen. Wenn aber die Höhe des Bildes bekannt ist könntest du doch mit dem Top-Wert der absoluten positionierung arbeiten, oder?

BTW, wie setzt man dass denn über den DOM?
denn element.style.vertical-align = "geht ja nich";

element.style.verticalAlign = "sollte gehen";

Gruß,

Harlequin

[Jonathan]

Hallo Harlequin,

Also vertical-align hat bei mir noch nie, in keinem Fall eine Wirkung gezeigt.

Das wirkt nur bei Tabellenzellen.

Nein, nicht nur. Damit kann man unter anderem auch die vertikale Position von Bildern innerhalb eines Fließtextes festlegen. Das vertikale Ausrichten von Texten innerhalb von div-Elementen und Absätzen geht da aber tatsächlich nicht mit.

Stattdessen kann man zumindest einen einzeiligen Text vertikel zentrieren, indem man die line-height des Elementes auf seine Höhe setzt.

Jonathan