Using css to display a variable portion of an image

Question

I'm making a progress bar to show progress towards a donation goal. My image is shaped like a thermometer, with a rounded bottom.

Here is the code I'm using to display the bar

<div style="width: 179px; height: <%: 484 * Model.PercentToGoal  %>px; background-image: url(../Content/Images/meter_fill.png); color: inherit;  position: absolute;  left:113px; bottom: 60px;">
    </div>

The issue I'm having is it seems to display the top part of the image first. How do I start displaying from the bottom of the image?

Answer 1

<div style="width: 179px; height: <%: 484 * Model.PercentToGoal  %>px; background-image: url(../Content/Images/meter_fill.png) bottom; color: inherit;  position: absolute;  left:113px; bottom: 60px;">
    </div>

--> css: background-position: bottom or the short way like in the code above