html input with background image

Question

Hello guys i have set background image on my input text and text area but i have few little problems

I have attached image. How i can change text start up position in Name text input?

and my text area is bigger then my background image

this is my Name text input with style

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;
    }

and here is my text area

<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;
    }

any advice? enter image description here

Can you clarify at all? For the input boxes you might want to add a few pixels of padding-left. For the text-area maybe a bit of padding-right. — Different55, Jan 12 '12 at 22:57
If you're able to use CSS3, then you can do the whole thing with no images. `textarea {border-radius:5px;}` will give you a good start. — Dan Blows, Jan 14 '12 at 16:37

score 8 · Accepted Answer · answered Jan 12 '12 at 23:00

Set the padding-left to a greater value on your inputs, and decrease the width of your textarea.

When you're designing your form it would be good to put a temporary border around your inputs to see where they are actually positioned, and when you're done just take it off.

score 1 · Answer 2 · edited Jan 14 '12 at 17:30

1

padding:10px;

(or more) on input and textarea.

edited Jan 14 '12 at 17:30

Andrew Whitaker

124,656
32
289
307

answered Jan 14 '12 at 16:25

Erick

108
8

html input with background image

2 Answers2

Linked