Прогресс-бар картинкой

Опыта в php и css у меня всего пара месяцев. Возникла необходимость сделать красивый прогресс-бар для браузерной онлайн-игры в виде картинкок(одна из них задняя, а вторая накладывается на другую), их ширина зависит от формулы, из которой выводится показатели пользователя. Всё вышло, но картинка сжимается если она занимает меньше 100% области, дабы полностью поместиться в неё. Суть моего вопроса заключается в следующем: как сделать прогресс-бар в виде фоновой картинки, ширина которой будет задаваться в % в зависимости от показателя из формулы. Т.е, допустим, в формуле получилось 70, нужно чтобы отобразилось 70% картинки без сжатия. Возможно, мой способ вообще не правильный.

Это стили

#download_1{
background: 
url(/style/download_user_1.jpg);
background-size: cover; 
position: relative;
overflow: hidden;
}
#download_2{
background: 
url(/style/download_user_2.jpg);
background-size: cover; 
position: relative;
overflow: hidden;
}  

Одна из формул

$life_hp=($datas['hp'])/($datas['hp_max'])*100;

Код с самим прогресс-баром

<div id="download_1" style="width:200px; height: 10px">
<div id="download_2" style="height: 10px; width: '.$life_hp.'%;">
</div>
</div>