title: how to dynamically size multi-css sprite image
body: <p>I have an image built from multiple css sprites, as described in this question: <a href="https://stackoverflow.com/questions/12992931/css-image-building-with-sprites">css image building with sprites</a></p>
  
  <p>How would I use that so that I could apply a size on the top container that would dynamically re-size all the children? </p>
  
  <p>here is the working fidlle so far: <a href="http://jsfiddle.net/hWhUb/3/" rel="nofollow noreferrer">http://jsfiddle.net/hWhUb/3/</a></p>
  
  <p>here is the current html structure: </p>
  
  <pre><code>&lt;div class="icon"&gt;
      &lt;div class="brigade brigade-purple-left"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;div class="brigade brigade-purple-middle"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;div class="brigade brigade-purple-right"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;div class="icon-type icon-hero"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>