how to display sprite image on web page

i found a nice sprite image, and id like to know how i can display the single sprite on a web page (see attached bmp image(sprite)

how does one do something like

[] Purple book
[] Coins
[] Yellow vile

css and or jquery is fine
i just dont understand how to display each section with words after it.

thank you in advance for any code or help you may provide

Who is Participating?
Sudaraka WijesingheConnect With a Mentor Web Application ProgrammerCommented:
Sprites are used as background images of an elements that has the dimention of the image (icon) you wish to display. So you will need HTML similar to this.
<div class="icon icon-purple-book"></div>
<div class="icon icon-coins"></div>
<div class="icon icon-yellow-vile"></div>

Open in new window

Then you position the icon into the view port of the element using the CSS
.icon{background-image:url(items1.bmp); width:50px; height:50px;}
.icon-purple-book{background-position:150px 200px;}
.icon-coins{background-position:150px 0;}
.icon-yellow-vile{background-position:200px 100px;}

Open in new window

(position ans size coordinates are approximate, you'll need to fine tune them)
Ali KayahanConnect With a Mentor Full Stack DeveloperCommented:
You should start saving your image as jpg or png , than ;

.purpleBook{width:50px;height:50px;background-position:0px -50px}

<div class='ico purpleBook'></div>Purple Book

with css background-position property you can move your background image as you wish it takes two paremeters x coordinates as first and y as second.

and within same class just assign width and height values that only shows the item that you want.
JohnnyAuthor Commented:
where does the cords start for 0,0 and where do they end, i cant get the grid to work for anything, it does display the info tho.
just cant get the images right
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

JohnnyAuthor Commented:
Sudaraka WijesingheConnect With a Mentor Web Application ProgrammerCommented:
position 0,0 means top left corner of the image. in the css the format is background-position: left top;
For example for your purple book, it should be:
.icon-purple-book {background-position:104px -200px;}
Ali KayahanFull Stack DeveloperCommented:
Pern whats your current issue it seems fine ?
JohnnyAuthor Commented:
great i was able to map a few of the icons now i think i got it.

but how does one get the words to be on the right side at
the words are on the next line. how can i fix that please
Sudaraka WijesingheConnect With a Mentor Web Application ProgrammerCommented:
put your text into a DIV tag (or any block element you like). Float both icon and text left and clear right on text.

<div class="icon icon-purple-book"></div><div class="icon-text">purple-book</div>

Open in new window

.icon {
.icon-text {

Open in new window

JohnnyAuthor Commented:
thank you both so much
Sudaraka WijesingheWeb Application ProgrammerCommented:
Glad to help. Thanks for the points.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.