Textfeld in ein Bild einbetten

[rumkugel]

Ich möchte gerne in einem html Dokument ein Textfeld haben. Dieses soll auf einem Bild liegen. Dieses Bild soll nicht das Hintergrundbild sein. Ich möchte das Textfeld sozusagen in das Bild einbetten. Wie geht das? Wäre dankbar für jede Hilfe.

 

[Herbboy]

Ich möchte gerne in einem html Dokument ein Textfeld haben. Dieses soll auf einem Bild liegen. Dieses Bild soll nicht das Hintergrundbild sein. Ich möchte das Textfeld sozusagen in das Bild einbetten. Wie geht das? Wäre dankbar für jede Hilfe.

wie meinst du das? meinst du einfach ein bild, in dem text steht? oder soll der text veränderbar sein? oder quasi ein eingabefeld?

 

[rumkugel]

Ich möchte gerne in einem html Dokument ein Textfeld haben. Dieses soll auf einem Bild liegen. Dieses Bild soll nicht das Hintergrundbild sein. Ich möchte das Textfeld sozusagen in das Bild einbetten. Wie geht das? Wäre dankbar für jede Hilfe.

wie meinst du das? meinst du einfach ein bild, in dem text steht? oder soll der text veränderbar sein? oder quasi ein eingabefeld?

Ja genau ein Eingabefeld.

 

[airbuspilot]

textarea { background: url(/path/to/image.png) }

_könnte_ funktionieren.

 

[klausbyte]

textarea { background: url(/path/to/image.png) }

_könnte_ funktionieren.

Tuts schon. Auch bei Inputs.

 

[rumkugel]

Ich habs mal ausprobiert. Diese Art von Textfeld meinte ich aber nicht. Wahrscheinlich ist Textfeld nicht der richtige Ausdruck dafür, aber ich meine das Eingabefeld von Formularen. Also sowas hier:

<form action="input_text.htm">
<p>Vorname:<br><input name="vorname" type="text" size="30" maxlength="30"></p>
<p>Zuname:<br><input name="zuname" type="text" size="30" maxlength="40"></p>
</form>

und das sollte möglichst über ein bild, das nicht das Hintergrundbild ist, rübergelegt werden.

 

[Pasdan]

Ich habs mal ausprobiert. Diese Art von Textfeld meinte ich aber nicht. Wahrscheinlich ist Textfeld nicht der richtige Ausdruck dafür, aber ich meine das Eingabefeld von Formularen. Also sowas hier:

<form action="input_text.htm">
<p>Vorname:<br><input name="vorname" type="text" size="30" maxlength="30"></p>
<p>Zuname:<br><input name="zuname" type="text" size="30" maxlength="40"></p>
</form>

und das sollte möglichst über ein bild, das nicht das Hintergrundbild ist, rübergelegt werden.

hmmm, also ich würde vermutlich versuchen das Bild per div absolut auf der Seite auszurichten, das Formular dann auf ein anderes div, ebenfalls absolut ausrichten und dann die Höhe der divs per z-index anpassen

http://de.selfhtml.org/html/referenz/elemente.htm#div
und hier mal z-index anschauen
http://de.selfhtml.org/navigation/css.htm#positionierung

 

[klausbyte]

Ich habs mal ausprobiert. Diese Art von Textfeld meinte ich aber nicht. Wahrscheinlich ist Textfeld nicht der richtige Ausdruck dafür, aber ich meine das Eingabefeld von Formularen. Also sowas hier:

<form action="input_text.htm">
<p>Vorname:<br><input name="vorname" type="text" size="30" maxlength="30"></p>
<p>Zuname:<br><input name="zuname" type="text" size="30" maxlength="40"></p>
</form>

und das sollte möglichst über ein bild, das nicht das Hintergrundbild ist, rübergelegt werden.

hmmm, also ich würde vermutlich versuchen das Bild per div absolut auf der Seite auszurichten, das Formular dann auf ein anderes div, ebenfalls absolut ausrichten und dann die Höhe der divs per z-index anpassen

http://de.selfhtml.org/html/referenz/elemente.htm#div
und hier mal z-index anschauen
http://de.selfhtml.org/navigation/css.htm#positionierung

Warum so umständlich? Man kann auch einfach ein div nehmen und das Formular darin platzieren, und dem div ein Hintergrundbild geben. Dazu muss man ja noch nichts absolut platzieren und mit z-indexen ausrichten.

Wenn wir den Autor richtig verstanden habe .. wobei mir da noch nicht sicher bin.

 

[Pasdan]

Ich habs mal ausprobiert. Diese Art von Textfeld meinte ich aber nicht. Wahrscheinlich ist Textfeld nicht der richtige Ausdruck dafür, aber ich meine das Eingabefeld von Formularen. Also sowas hier:

<form action="input_text.htm">
<p>Vorname:<br><input name="vorname" type="text" size="30" maxlength="30"></p>
<p>Zuname:<br><input name="zuname" type="text" size="30" maxlength="40"></p>
</form>

und das sollte möglichst über ein bild, das nicht das Hintergrundbild ist, rübergelegt werden.

hmmm, also ich würde vermutlich versuchen das Bild per div absolut auf der Seite auszurichten, das Formular dann auf ein anderes div, ebenfalls absolut ausrichten und dann die Höhe der divs per z-index anpassen

http://de.selfhtml.org/html/referenz/elemente.htm#div
und hier mal z-index anschauen
http://de.selfhtml.org/navigation/css.htm#positionierung

Warum so umständlich? Man kann auch einfach ein div nehmen und das Formular darin platzieren, und dem div ein Hintergrundbild geben. Dazu muss man ja noch nichts absolut platzieren und mit z-indexen ausrichten.

Wenn wir den Autor richtig verstanden habe .. wobei mir da noch nicht sicher bin.

Da hast du wohl recht, das ginge natürlich auch und wäre weniger aufwändig, aber ich denke mal, dass die Formularelemente an bestimmten Stellen im Bild sein sollen.
Daher die Idee mit 2 divs.

 

[klausbyte]

Ich habs mal ausprobiert. Diese Art von Textfeld meinte ich aber nicht. Wahrscheinlich ist Textfeld nicht der richtige Ausdruck dafür, aber ich meine das Eingabefeld von Formularen. Also sowas hier:

<form action="input_text.htm">
<p>Vorname:<br><input name="vorname" type="text" size="30" maxlength="30"></p>
<p>Zuname:<br><input name="zuname" type="text" size="30" maxlength="40"></p>
</form>

und das sollte möglichst über ein bild, das nicht das Hintergrundbild ist, rübergelegt werden.

hmmm, also ich würde vermutlich versuchen das Bild per div absolut auf der Seite auszurichten, das Formular dann auf ein anderes div, ebenfalls absolut ausrichten und dann die Höhe der divs per z-index anpassen

http://de.selfhtml.org/html/referenz/elemente.htm#div
und hier mal z-index anschauen
http://de.selfhtml.org/navigation/css.htm#positionierung

Warum so umständlich? Man kann auch einfach ein div nehmen und das Formular darin platzieren, und dem div ein Hintergrundbild geben. Dazu muss man ja noch nichts absolut platzieren und mit z-indexen ausrichten.

Wenn wir den Autor richtig verstanden habe .. wobei mir da noch nicht sicher bin.

Da hast du wohl recht, das ginge natürlich auch und wäre weniger aufwändig, aber ich denke mal, dass die Formularelemente an bestimmten Stellen im Bild sein sollen.
Daher die Idee mit 2 divs.

Das stimmt.
Entweder er meint es so wie du es beschrieben hast, oder er will nur ein <input> mit nem Hintergrundbild hinterlegen. Wobei die Frage blödsinnig wäre, weil er ja quasi schon den richtigen Code für die Textarea hat.

 

[rumkugel]

Okay vlt war die Frage blöd aber ich will einfach nur nen input mit einem Bild hinterlegen. Und ich hab keine ahnung wie das geht und von html hab ich auch nicht viel Ahnung.

 

[klausbyte]

Okay vlt war die Frage blöd aber ich will einfach nur nen input mit einem Bild hinterlegen. Und ich hab keine ahnung wie das geht und von html hab ich auch nicht viel Ahnung.

Ersetze einfach das textarea durch ein input. Ansonsten definierst du eine Klasse und weist sie nur diesem <input> zu.

 

[rumkugel]

Ersetze einfach das textarea durch ein input. Ansonsten definierst du eine Klasse und weist sie nur diesem <input> zu.

Also erstmal vielen Dank für die Hilfe. Aber wenn ich richtig verstanden hab dann sollte das ungefähr so aussehen:
<input type="text" { background: url(Z:\\xyz\\abc\\Unbenannt.png) }>
oder? Das funktioniert aber leider nicht. Und was ist eine Klasse in html?

 

[klausbyte]

Ersetze einfach das textarea durch ein input. Ansonsten definierst du eine Klasse und weist sie nur diesem <input> zu.

Also erstmal vielen Dank für die Hilfe. Aber wenn ich richtig verstanden hab dann sollte das ungefähr so aussehen:
<input type="text" { background: url(Z:\\xyz\\abc\\Unbenannt.png) }>
oder? Das funktioniert aber leider nicht. Und was ist eine Klasse in html?

Das da oben war CSS-Code.


<input type="text" style=" background: url(Z:\\xyz\\abc\\Unbenannt.png) " />

Allerdings würde ich eher relative Pfadangaben machen anstatt von absoluten..
für dich lokal geht das sicher so.

 

[Pasdan]

Ersetze einfach das textarea durch ein input. Ansonsten definierst du eine Klasse und weist sie nur diesem <input> zu.

Also erstmal vielen Dank für die Hilfe. Aber wenn ich richtig verstanden hab dann sollte das ungefähr so aussehen:
<input type="text" { background: url(Z:\\xyz\\abc\\Unbenannt.png) }>
oder? Das funktioniert aber leider nicht. Und was ist eine Klasse in html?

Das da oben war CSS-Code.


<input type="text" style=" background: url(Z:\\xyz\\abc\\Unbenannt.png) " />

Allerdings würde ich eher relative Pfadangaben machen anstatt von absoluten..
für dich lokal geht das sicher so.

ja, lokal und nur lokal wird das funktionieren
pfadangaben bei ner Website die mal irgendwann veröffentlicht werden soll immer relativ.
ich geh jetzt mal von einer Ordnerstruktur aus die wie folgt aussieht.
wwwroot
-Bilderverzeichnis
--beispiel.jpg
index.html

soll heißen, die index.html liegt im rootverzeichnis deines Webspace
wenn du jetzt ein Bild aus dem Bilderverzeichnis anzeigen willst dann bitte NICHT im windows style: .\Bilderverzeichnis\beispiel.jpg sondern ./Bilderverzeichnis/beispiel.jpg
am besten gar nicht erst mit absoluten Pfaden anfangen sonst kannst du nachher dein ganzes Projekt durchgehen und alle Links und Bildverweise ändern.

Und was ist eine Klasse in html?

ein Klasse gibt es nicht in HTML. Es gibt Klassen in CSS. Sie werden verwendet um das Erscheinungsbild einer HTML seite zu ändern. Man kann sich das wie eine Vorlage in Word vorstellen.

mehr zu CSS (genauere Erklärung was CSS eigentlich ist, Anwendung ...)hier: http://de.selfhtml.org/css/intro.htm

 

[rumkugel]

Irgendwie funktioniert das bei mir nicht. ich kriege immer nur ein normales eingabefeld ohne grafik. Außerdem glaube ich es wurde noch nicht so richtig verstanden was ich meine. Ich würde gerne eine Grafik haben, in deren Mitte ein Textfeld ist wo man was eingeben kann. Also das Bild soll sozusagen um das Feld drum rum sein. Entschuldigung falls es Missverständnisse gab.

 

[klausbyte]

Irgendwie funktioniert das bei mir nicht. ich kriege immer nur ein normales eingabefeld ohne grafik. Außerdem glaube ich es wurde noch nicht so richtig verstanden was ich meine. Ich würde gerne eine Grafik haben, in deren Mitte ein Textfeld ist wo man was eingeben kann. Also das Bild soll sozusagen um das Feld drum rum sein. Entschuldigung falls es Missverständnisse gab.

vs

Okay vlt war die Frage blöd aber ich will einfach nur nen input mit einem Bild hinterlegen. Und ich hab keine ahnung wie das geht und von html hab ich auch nicht viel Ahnung.

Unsere Codes stimmen. Wenn du es mit meinem Code nicht machen willst, dann nimm die Lösung die hier schon jemand anderes gepostet hat. Mehr Möglichkeiten gibt es nicht.

 

[rumkugel]

Wenn ich jetzt deinen Code in ein html Dokument einbaue wie soll es denn, deiner Meinung nach aussehen? Wie gesagt bei mir erscheint nur ein eingabefeld ohne hintergrund. Und wenn es bei dir anders aussieht, woran könnte es dann liegen das es bei mir nicht so ist?

 

[klausbyte]

Wenn ich jetzt deinen Code in ein html Dokument einbaue wie soll es denn, deiner Meinung nach aussehen? Wie gesagt bei mir erscheint nur ein eingabefeld ohne hintergrund. Und wenn es bei dir anders aussieht, woran könnte es dann liegen das es bei mir nicht so ist?

Das der Pfad zu dem Bild nicht stimmt. Du hast da irgend einen Stumpfsinn von Laufwerk Z angegeben, das geht eh niemals so im Internet. Das Bild in den gleichen Ordner wie die HTML-Seite und die Überflüssigen Pfadangaben entfernen

 

[rumkugel]

Wenn ich jetzt deinen Code in ein html Dokument einbaue wie soll es denn, deiner Meinung nach aussehen? Wie gesagt bei mir erscheint nur ein eingabefeld ohne hintergrund. Und wenn es bei dir anders aussieht, woran könnte es dann liegen das es bei mir nicht so ist?

Das der Pfad zu dem Bild nicht stimmt. Du hast da irgend einen Stumpfsinn von Laufwerk Z angegeben, das geht eh niemals so im Internet. Das Bild in den gleichen Ordner wie die HTML-Seite und die Überflüssigen Pfadangaben entfernen

Okay jetzt war ein Effekt zu merken. Leider scheint das Bild im Textfeld drin zu sein. Man kann das nicht so genau erkennen da es recht winzig ist im Textfeld.