Icons inside input text elementput

Suppose we have this in the css file:

#icon{
background-image:url(../images/icons/dollar.png); 
background-repeat: no-repeat; 
background-position: 2px 3px;
}
and now in the html file:

<input id="icon" style="text-indent: 17px;" type="text" placeholder="Username" />

We can see the image in the input background.

With this idea we can have differents ways to do:

input[type='text'] {
    background-image: url(images/comment-author.gif);
    background-position: 7px 7px;
    background-repeat: no-repeat;
}
background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;