title: Is that possible to do this using external CSS?
body: <p>Consider the <a href="http://jsfiddle.net/dvqU8/2/" rel="nofollow">following example</a>:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="julia" class="photo"&gt;&lt;/div&gt;
  &lt;div id="rachel" class="photo"&gt;&lt;/div&gt;
  &lt;div id="martin" class="photo"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.photo {
      width: 60px;
      height: 60px;
      display: inline-block;
  }
  .photo:hover {
      background-position: -60px 0;
  }
  #julia {
      background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png');
  }
  #rachel {
      background-image: url('http://www.mypicx.com/uploadimg/1932001963_05012011_1.png');
  }
  #martin {
      background-image: url('http://www.mypicx.com/uploadimg/2082029375_05012011_3.png');
  }
  </code></pre>
  
  <p>This example demonstrates what I want to achieve. </p>
  
  <p>The HTML is generated by Rails 3 application. It should display all the users in a specific group (this info is stored in the database). In other words, the list of users to display may vary.</p>
  
  <p>The problem is that I don't want to have this code:</p>
  
  <pre><code>#username {
      background-image: url('/path/to/username/sprite');
  }
  </code></pre>
  
  <p>for each existing username. Moreover, if a new user is added, I don't want to change the CSS.</p>
  
  <p>The question is: Is that possible to achieve the same effect <strong>using external CSS</strong> ?</p>