title: CSS3 multiple backgrounds across selectors
body: <p>What I want to achieve is to set background in two separate CSS classes (using CSS3's multiple backgrounds would be great). I would like to that with as little markup as possible and to be universal.</p>
  
  <p>Example:</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.button {
      display: block;
  }
  
  .green {
      background-color: #87b400;
      background: -moz-linear-gradient(top,  #a4d400,  #739e00);
  }
  
  .icon {
      background-repeat: no-repeat;
  }
  
  .icon.add {
      background-image: url('../img/icons/add.png');
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;a href="#" class="button green icon add"&gt;add item&lt;/a&gt;
  &lt;input type="submit" name="example" value="add item" class="button green icon add" /&gt;
  &lt;button type="submit" class="button green icon add"&gt;add item&lt;/button&gt;
  </code></pre>
  
  <p>I realize that i can do something like that</p>
  
  <pre><code>&lt;a href="#" class="button green"&gt;&lt;span class="icon add"&gt;add item&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  
  <p>but I think that there is a better way and I wouldn't be able to use it inside <code>input</code> element.</p>
  
  <p>I also don't want to do something like this</p>
  
  <pre><code>.button.green.icon.add {
      background: -moz-linear-gradient(top,  #a4d400,  #739e00),
                  url('../img/icons/add.png');
  }
  </code></pre>
  
  <p>because having, let's say, 5 colors and 11 icons it is going to be a horror.</p>