title: Is it possible to append a CSS3 background with additional classes / styles?
body: <p>Today I learned CSS3 supports <a href="https://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients">multiple backgrounds</a>, which is awesome.
  What I'd really like is the ability to combine multiple backgrounds on the fly, EG:</p>
  
  <pre><code>.Watermarked{
    background: url('text/logo.png') bottom right no-repeat;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="Watermarked" 
       style="background:url('photos/very_pretty_sunset.jpg') 0 0 no-repeat;"&gt;
  ...
  </code></pre>
  
  <p>Somehow produces the computed style:</p>
  
  <pre><code> background: url('text/logo.png') bottom right no-repeat,
               url('photos/very_pretty_sunset.jpg') 0 0 no-repeat;    
  </code></pre>
  
  <p>Of course I can hard code the extra background style or add it using jquery.  I am seeking that sweet, pure, CSS-only solution.</p>
  
  <p><strong><em>Answered</em></strong></p>
  
  <p>Accepted thirtydot for the pure CSS answer- "You can't".</p>
  
  <p>It's worth highlighting that if you're working with <a href="http://sass-lang.com" rel="nofollow noreferrer">SASS</a> (Rails 3.1, etc), the hard-coded styles are more palatable through variable use:</p>
  
  <pre><code>$watermarkImage: url('text/logo.png') left top no-repeat;
  ...
  #very_pretty_sunset{
    background: $watermarkImage, url('photos/very_pretty_sunset.png') right bottom no-repeat;
  }
  </code></pre>