When you set background-position with a percentage, the background image is positioned at that percentage of its parent with that percentage of the image itself centered at that point. You really have to see the demo to understand.

Thanks for the great solution. Is there any possibility to have the image responsive for HEIGHT and sides crop? If the height of the container was 200px – the image would resize/scale to 200px height but sides would crop.