title: CSS3: set background image to rel attribute value
body: <p>I'm looking to set the <code>background-image</code> (or even render an image via the pseudo elements <code>:after</code> or <code>:before</code>) to the value, which will be a URL, of a <code>rel</code> attribute, but only in certain cases (this is a cloud file listing). For example:</p>
  
  <p>HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="icon ${fileExtension}" rel="${fileURL}"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>It would be great if I could do something like this:</p>
  
  <p>CSS:</p>
  
  <pre><code>.icon.png,
  .icon.jpg,
  .icon.jpeg,
  .icon.bmp,
  .icon.gif { background-image: attr(rel,url);  }
  </code></pre>
  
  <p>... but obviously that doesn't work as, if I'm not mistaken, the <code>attr()</code> CSS function only works inside pseudo element blocks.</p>
  
  <p>I know there are ways of doing this using conditional JSP or even jQuery logic, but I'd like to figure out a neat way of doing it via CSS3, since I'm only concerned with modern browsers at the moment anyway.</p>
  
  <p>Also, I don't want to explicitly set the background image to the URL or create an <code>&lt;img&gt;</code> element, because by default if the file is not a supported image, I'd rather display a predetermined set of icons.</p>