To resize your flag from 16x11px to 100x50px, you will need to scale the image 6.25 times on the x axis and 4.54 times on the y axis. Adjust the background-size property accordingly:
background-size: calc( 390px * 6.25 ) calc ( 260px * 4.54 );
Don't forget to update the background-position as well. Here's an example for the first flag:
.flag {
width: 100px;
height: 50px;
background-image: url('http://icons.iconarchive.com/icons/famfamfam/flag/icons-390.jpg');
background-position: -38px -36px;
background-size: calc(390px * 6.25) calc(260px * 4.5); // original image size
}
<div class="flag"></div>
Remember that stretched images may not look great. To improve rendering in FireFox and Chrome, consider using the image-rendering property:
.flag {
width: 100px;
height: 50px;
background-image: url('http://icons.iconarchive.com/icons/famfamfam/flag/icons-390.jpg');
background-position: -38px -36px;
background-size: calc(390px * 6.25) calc(260px * 4.5);
image-rendering: -moz-crisp-edges;
image-rendering: pixelated;
}
<div class="flag"></div>