[HTML/CSS]Bild als Inputfeld!

Page 1 of 2 1 2
01/08/2013 23:16 .0nLy#1
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 :)
01/08/2013 23:19 Synatex#2
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;
}
01/08/2013 23:22 .0nLy#3
Danke !
Werde ich sofort testen!
01/08/2013 23:24 Synatex#4
Nicht vergessen width und height Attribute abhängig von der Größe deines Bildes zu setzen, andernfalls zerstören die Standardwerte das ganze ;)
01/08/2013 23:44 .0nLy#5
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>
01/09/2013 08:25 NotEnoughForYou#6
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
01/09/2013 21:17 .0nLy#7
könntest du es etwas genauer schreiben?
bin noch anfänger
01/09/2013 21:19 Synatex#8
Anfänger heißt aber nicht das wir dir alles vorkauen ;)

Ich würde dir raten dich mit [Only registered and activated users can see links. Click Here To Register...] und den Grundlagen ausseinander zu setzen damit du wenigstens weißt wovon wir hier reden. Sonst bringt dir das alles nichts.
01/09/2013 21:20 Rockvolution#9
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
01/09/2013 21:27 .0nLy#10
danke klappt.. jedoch wird nur die obere hälfte von dem bild angezeigt
01/09/2013 21:30 Rockvolution#11
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 :D
01/09/2013 21:33 .0nLy#12
okay hat geklappt danke!
01/09/2013 21:34 Rockvolution#13
kein problem falls du weiter hilfe braust adde mich auf skype:rock.volution
01/09/2013 22:41 .0nLy#14
hab dich geaddet
01/10/2013 13:26 NotEnoughForYou#15
Du solltest dir den Inlinestyle aber nicht angewöhnen.
Page 1 of 2 1 2