title: css3 dynamic background image url
body: <p>I am attempting to lighten the weight of my CSS files, and have a question. It is a bit difficult to explain, so in an attempt to simplify the question a bit, imagine this (fictitious) scenario.</p>
  
  <p>Imagine I owned an electrical shop, and sold TV's, Radios and DVD players.  Furthermore, I only sold items made by Panasonic, Sony, Samsung and NEC.</p>
  
  <p>Each of the four manufacturers has it's own image, and each of the three electrical items showed the image with different crops, aspect ratio etc.  (Point being, i cannot use the same image across different products, just rescaled. They are separate images)</p>
  
  <p>So far, my css for my product website looks like this</p>
  
  <pre><code>/* TVs */
  a.tv.panasonic { background:url('/images/television/panasonic.jpg'); }
  a.tv.sony      { background:url('/images/television/sony.jpg'); }
  a.tv.samsung   { background:url('/images/television/samsung.jpg'); }
  a.tv.nec       { background:url('/images/television/nec.jpg'); }
  
  /* Radios */
  a.radio.panasonic { background:url('/images/radio/panasonic.jpg');}
  a.radio.sony      { background:url('/images/radio/sony.jpg');}
  a.radio.samsung   { background:url('/images/radio/samsung.jpg');}
  a.radio.nec       { background:url('/images/radio/nec.jpg');}
  
  /* DVD Players */
  a.dvd.panasonic { background:url('/images/dvd/panasonic.jpg');}
  a.dvd.sony      { background:url('/images/dvd/sony.jpg');}
  a.dvd.samsung   { background:url('/images/dvd/samsung.jpg');}
  a.dvd.nec       { background:url('/images/dvd/nec.jpg');}
  </code></pre>
  
  <p>This is just twelve styles and is not a big deal, but in reality, we have about 12 different "products" and about 80 different "manufacturers", which is really hard to manage, especially considering the "manufacturer" image will change frequently. Additionally, I don't have a server side language at my disposal.</p>
  
  <p>Therefore, my question is this. Is it possible to merge image URL's from two rules?  For example, can I do something like the following:</p>
  
  <pre><code>a.tv    { background:url('/images/television'); }
  a.radio { background:url('/images/radio'); }
  a.dvd   { background:url('/images/dvd); }
  
  a.panasonic { background:url( background + '/panasonic.jpg'); }
  a.sony      { background:url( background + '/sony.jpg'); }
  a.samsung   { background:url( background + '/samsung.jpg'); }
  a.nec       { background:url( background + '/nec.jpg'); }
  </code></pre>
  
  <p>That way, every time we get a new "manufacturer/product" or the image for a manufacturer changes, I only need to edit/amend one line</p>
  
  <p>Thanks</p>