CSS newbie background image for input

Question

I have an image with and array 16x16 of multiple icons. eg "http://www.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

Answer 1

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

Answer 2

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 */
}