What is CSS Sprites?

Prepare some icons or images with the help of Photoshop as a single file which has space between two icons or pics. Save it as PNG file. Or use my image below.

Your HTML file must be as shown below. ( Copy paste can be trouble sometimes Here is to download the CSS and HTML file.)

< html>

< head> < title> Learning CSS Sprite < /title>
< /head>
< body>

< div id="sprite_container">
< div class="bestwishes">

< /div>

< div class="frebies">

< /div>

< div class="emailme">

< /div>
< div class="findonface">

< /div>
< div class="instagram">

< /div>
< div class="gmail">


< /div>
< /div>


< /body>
< /html>

Instead of struggling with the codes to clarify the positions of image parts, there are couple of websites to help you with it. 

• Open http://www.spritecow.com/

• Open your PNG image . Here is to download the PNG images

• Then 1. Select Sprite Tool, 2. Select one of your images, it will automatically select the part of image considering the spaces around, 3. Copy all code.
• Then, change ".sprite" with the name "bestwishes",
• If you want to open your website very very fast by reducing the codes, then delete "background: url..." code and add "background-position" like below. And then, the codes must be like below. 

.bestwishes  {
width:  155px;
height:  27px;
background-position:  -34px -33px;}

• Apply this to each image, and your CSS codes must be edited like below.  (Copy paste can be trouble sometimes  Here is to download the CSS and HTML file.)

< style>
.bestwishes, .frebies, .emailme, .findonface, .instagram, .gmail {
background-image: url('https://www.alpinpon.com/wp-content/uploads/2018/01/css-sprite-all-icon.png');
background-repeat: no-repeat;
< /style>

}

#sprite_container {width:263px; margin:0 auto; }


.bestwishes {
width: 155px;
height: 27px;
background-position: -34px -33px;
}

.frebies {

width: 210px;
height: 33px;
background-position: -15px -114px;
}

.emailme {

width: 129px;
height: 125px;
background-position: -298px -156px;
}

.findonface {

width: 252px;
height: 84px;
background-position: -309px -30px;
}

.instagram {

width: 80px;
height: 80px;
float:left;
background-position: -22px -189px;
}

.gmail {

width: 97px;
height: 68px;
background-position: -122px -196px;
}
< /stlyle>

You can move your images independently wherever you want moving its "div".