How to put images in HTML text and password fields?

How to put images in HTML text and password fields?

You can easily place images inside text fields in HTML. To explain this, I am making a registration form in which I have text and password fields like name, email, password and confirm password. I want to put user image inside name text field, email image inside email field and so on. I have kept images(32*32 png icons) of user, email and password in images folder.

HTML file

     

 

 

 

 

        

CSS file

#register input#name 

{

  background: #fff url('../images/user.png') 5px 4px no-repeat;

}

#register input#email 

{

  background: #fff url('../images/email.png') 5px 4px no-repeat;

}

#register input#password 

{

  background: #fff url('../images/password.png') 5px 4px no-repeat;

}

#register input#confirmpassword 

{

  background: #fff url('../images/password.png') 5px 4px no-repeat;

}