title: How to position an image sprite at the bottom of an element of unknown height
body: <p>I am using an image sprite that consisting of four "sub-images": four corners for a <code>div</code> element. The sprite is 40px by 40px. Each "sub-image" is 20px by 20px. Each corner's "sub-image is on the opposite corner of the sprite of where it would be on the dev element. For example, the top-left sub-image is at the bottom-right of the sprite.</p>
  
  <p>This <code>div</code> element is 440px wide and 100% tall. I've got the top corners down but how do I get the bottom corners? Is there a way to do this without creating a new sprite? Here is what I've got so far for my CSS rule.</p>
  
  <pre><code>background: -20px -20px no-repeat url(&lt;path&gt;), 420px -20px no-repeat url(&lt;path&gt;);
  </code></pre>