[HTML/CSS]Bild als Inputfeld!

.0nLy · 01/08/2013, 23:16

Hey Epvp,
Ich habe ein Bild mit Photoshop erstellt und als .png gespeichert.
Nun möchte ich dieses Bild als Inputfeld haben. Ist dies Möglich? Wenn ja, kann mir einer sagen wie das geht?

Mit freundlichen Grüßen

Synatex · 01/08/2013, 23:19

HTML Code:

/* Nur die normalen Input-Felder wählen, keine Submit- Buttons und Standarsachen raushauen */
input[type=text], input[type=password] {
 background: transparent url(linkzumbild);
 border: 0;
}

.0nLy · 01/08/2013, 23:22

Danke !
Werde ich sofort testen!

Synatex · 01/08/2013, 23:24

Nicht vergessen width und height Attribute abhängig von der Größe deines Bildes zu setzen, andernfalls zerstören die Standardwerte das ganze

.0nLy · 01/08/2013, 23:44

wie meinst du das? muss ich dafür eine extra css datei erstellen? oder kann ich es einfach so einfügen?
warte hier der Code:

HTML Code:

<html>
<head>
<title>Chooo :D</title>
</head>
<body>
<form action="" method="post">
 <br><input name="vorname" type="text" size="30" maxlength="30" {background: transparent url(img/inputfeld);
 border: 0;}></p>
 </form>
</body>
</html>

NotEnoughForYou · 01/09/2013, 08:25

So wie du es hast nicht. Du hast 3 Moeglichkeiten.
1. Externe css Datei
2. Im <head> ueber den <style> tag
3. Mittels inlinestyle (style attribut zB. <input style="border:none;" />)

1. und 2. sind der 3. Variante vorzuziehen

.0nLy · 01/09/2013, 21:17

könntest du es etwas genauer schreiben?
bin noch anfänger

Synatex · 01/09/2013, 21:19

Anfänger heißt aber nicht das wir dir alles vorkauen

Ich würde dir raten dich mit

und den Grundlagen ausseinander zu setzen damit du wenigstens weißt wovon wir hier reden. Sonst bringt dir das alles nichts.

Rockvolution · 01/09/2013, 21:20

HTML Code:

<input name="vorname" type="text" size="30" maxlength="30" style="background: transparent url(img/inputfeld);border:none;">

das bild hat auch noch ne endung also noch dahin schreiben .jpg .png .gif usw

.0nLy · 01/09/2013, 21:27

danke klappt.. jedoch wird nur die obere hälfte von dem bild angezeigt

Rockvolution · 01/09/2013, 21:30

mach

HTML Code:

<input name="vorname" type="text" size="30" maxlength="30" style="background: transparent url(img/inputfeld);border:none;">

dann must du eine width und eine height festlegen damit dass bild skalliert wird
also hier style="background: transparent url(img/inputfeld);border:none;width:00px;height:00px; da oben halt mit rein machen und mit den pixeln spielen

.0nLy · 01/09/2013, 21:33

okay hat geklappt danke!

Rockvolution · 01/09/2013, 21:34

kein problem falls du weiter hilfe braust adde mich auf skype:rock.volution

.0nLy · 01/09/2013, 22:41

hab dich geaddet

NotEnoughForYou · 01/10/2013, 13:26

Du solltest dir den Inlinestyle aber nicht angewöhnen.