Show only small portion of an image [closed] - html

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Recently when I right clicked on the cross icon and saw the background image in the Tags section of Ask Question page I saw that it consisted of multiple icons other than the cross. I searched it on google and came to know that its done using html and css. The search results didn't help.
I am new to html and after searching I am introduced to this new language css. This may be a simple question to answer for experts like you but headache for beginners like me. Please I really want to know how its done.
Thanks in advance.

Answer 1

1. Its done using background-image,background-position for an element with set width and height.
See this fiddle(It contains a Facebook Image instead) :
http://jsfiddle.net/axF59/
2. These CSS queries can be solved urself by using Inspect Element. Like you saw the background image by Right Click > View Background Image , in similar way you can see CSS of web page by Right Click > Inspect Element in browsers like Mozilla ,Chrome ...

Answer 2

It's called a spritesheet. You'll find vast of amounts of info, tips and tutorials if you search the internet for spritesheet + js/css

Answer 3

This is done using the CSS background-position and background-image property. It allows all of the sprites to be loaded using a single image.
The background-position CSS property sets the initial position [...] for each defined background image.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
The CSS background-image property sets one or several background images for an element. The images are drawn on successive stacking context layers, with the first specified being drawn as if it is the closest to the user. The borders of the element are then drawn on top of them, and the background-color is drawn beneath them.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
Example
HTML
<span class="sprite sprite1"></span>
<span class="sprite sprite2"></span>
<span class="sprite sprite3"></span>
CSS
.sprite {
display: inline-block;
/* Replace this with a live image. */
background-image: url("http://www.example.com/example.jpg");
height: 16px;
width: 16px;
}
.sprite1 {
/* This doesn't actually need to be here, because this is default. */
background-position: 0 0;
}
.sprite2 {
/* Move 16 pixels to the left. */
background-position: -16px 0;
}
.sprite3 {
/* Move 16 pixels up. */
background-position: 0 -16px;
}