title: Using css to display a variable portion of an image
body: <p>I'm making a progress bar to show progress towards a donation goal. My image is shaped like a thermometer, with a rounded bottom.</p>
  
  <p>Here is the code I'm using to display the bar</p>
  
  <pre><code>&lt;div style="width: 179px; height: &lt;%: 484 * Model.PercentToGoal  %&gt;px; background-image: url(../Content/Images/meter_fill.png); color: inherit;  position: absolute;  left:113px; bottom: 60px;"&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>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?</p>