html-Eingabe mit Hintergrundbild

Question

Hallo Leute, ich habe ein Hintergrundbild auf meinen Eingabetext und Textbereich gesetzt, aber ich habe ein paar kleine Probleme

Ich habe ein Bild beigefügt. Wie kann ich die Startposition des Textes in der Texteingabe für den Namen ändern?

und mein Textbereich ist größer als mein Hintergrundbild

Dies ist mein Name Texteingabe mit Stil

input type="text" name="txtName" class="input" />

.input
{
    border: 0px solid #444444;
    height:39px;
    width:346px;
    background:url(images/Contact_05.jpg) no-repeat right top; 
    color:#fff; 
    padding-left:4px; 
    font-size:20px;
    }

und hier ist mein Textbereich

<textarea rows="5" cols="0" class="inputMessage"></textarea>
.inputMessage
{
    border:0px solid #444444;  
    height:386px; 
    width:685px;
    background:url(images/Contact_20.jpg) no-repeat left top; 
    padding-left:4px; 
    color:#fff; 
    font-size:20px; resize:none;
    }

Haben Sie einen Rat?

Answer 1

Setzen Sie den Wert für padding-left auf einen größeren Wert für Ihre Eingaben, und verringern Sie die Breite Ihres Textbereichs.

Wenn Sie Ihr Formular entwerfen, wäre es gut, einen vorläufigen Rahmen um Ihre Eingaben zu setzen, um zu sehen, wo sie tatsächlich positioniert sind, und wenn Sie fertig sind, entfernen Sie ihn einfach.

Answer 2

padding:10px;

(oder mehr) auf input y textarea .