From W3 Organization Article https://www.w3.org/wiki/CSS_background_images#Sprites
Users want it all. They want your site to be glamorous, interactive, and also fast, however including large numbers of CSS background images can slow your site down considerably—the more HTTP requests you make, the slower your site will be (an HTTP request is when your computer is accessing a web site and needs to ask the server to send it another asset that makes up the site, such as a CSS file or image - each additional request means a longer loading time for the site). To get around this limitation, you can combine related icons into a single image, known as CSS Sprites. The
background-position property allows you to then place the image in the appropriate positions so the icons display through the window of the HTML element the CSS sprites are attached to.
For example in Figure 13, you will see that to display the earth icon through the HTML window you can place the image using
left top. To move the position of the image so the alert icon is displayed, the background position needs to be changed to
-80px 0. The negative horizontal value pulls the image to the left.
Figure 13: Using CSS Sprites to reduce HTTP requests.
More information : CSS Sprites: What They Are, Why They’re Cool, and How To Use Them