CSS newbie background image for input

I have an image with and array 16x16 of multiple icons. e.g. "http://ww开发者_如何学编程w.freepbx.org/v3/browser/trunk/assets/css/jquery/vader/images/ui-icons_cd0a0a_256x240.png?rev=1"

Any idea how to choose only one of those icons and set it as a background image using CSS?

What I want to achieve is have an x icon or tick icon to the right of an input text element in to notify the user if what he has given as input is valid or invalid.

Thanks, Stavros

---

You would set the height of an element to the height of the icon in that image that you want, and then set the background of that element like so:

span {
    background:url(path/to/image) 50px 10px;
    height:10px;
    width:10px;
}

Where the element used is a span, and the desired icon is at position (50px, 10px). To learn more about positioning backgrounds have a look at: http://www.w3schools.com/cssref/pr_background-position.asp

---

You can accomplish this with css, something like this:

div#myDiv {
    background-image:url('url-to-image');
    background-position:50px 50px; /* coordinates of the top left corner of the image portion you want to display */
    width:20px; /* Width of image portion */
    height:20px; /* Height of image portion */
}