Why scale the background image with this markup?

Question

My style definition:

<style>
  .x { background-image:url(https://raw.githubusercontent.com/iamcal/emoji-data/master/sheet_emojione_64.png); 
       border:solid 1px red; 
     }
</style>

The file above is 2624px x 2624px containing emojis in 64-pixel cells. 64 - 1/41 of 2624. The image in cell 13.7 is a camel.

My markup:

<div class='x' style='background-position:-832px -448px; height:64px; width:64px;' ></div>
<div class='x' style='background-position:-832px -448px; background-size:4100%; 
   height:64px; width:64px;' ></div>
<div class='x' style='background-position:-312px -168px; background-size:4100%; 
   height:24px; width:24px;' ></div>

JS Fiddle is located at https://jsfiddle.net/5j5ahhda/ , and the output is:

My understanding of the second DIVis that I compress a 2624px image into a square of 64 pixels, 1/4 of its size, and then blow it 41 times, which leads to the fact that the image matches the original size, Is this understanding correct?

DIV , , , 24/64. DIV ?

24/64 . ?

Answer 1

DIV , 2624px 64 , 1/4 , 41 , , , ?

.

DIV , , , 24/64. DIV ?

. background-size . , . , background-size.