Understanding this image sprite

[johnsmith153]

This works as I want it to, but I just don't understand how the settings used come about this.

http://page-test.co.uk/v.html

I understand the first symbol (class 'email-symbol') which is the same size as the image on the sprite sheet, but I don't understand the others.

It's 'background-position' and 'background-size' where I can't understand how the figures are calculated. There doesn't seem to be a pattern.

I want to get a formula so I can easily do this for all other images on that sprite sheet and also for other sprite sheets.

I don't get how background-size:1000% works for the one double the size and then background-size:1200% works for the one ten times the size.

[dresden_phoenix]

Your thinking is all wrong. A sprite need not be ( and usually isnt) proportional to its container ( not even in this case). remember that the BG-size coefficient will apply to the WHOLE image and not just the visible segment. In other words making the envelope 2x as big is no longer as simple as multiplying the size of the envelope by 200% ( since the envelope is not 100% of your sprite)

the important part really is that the coordinates are multiplied , roughly it seems, by the size coefficient and thus achieving the alignment:

EG
.email-symbol-double {
border:2px solid blue;
background-image:url('http://www.page-test.co.uk/spritemap.svg');
width:57px;
height:45px;
background-position:-312px -113px;
background-repeat:no-repeat;
background-size:965%;
}

note that now the container size is TRIPLE. I needed only 965% to make it so ( I suspect there was some clipping in your original example anyway)
HOWEVER... my positioning is essentially linear ( ~3x -102px , ~3x -37px)