Question

Today I learned CSS3 supports multiple backgrounds, which is awesome.
What I’d really like is the ability to combine multiple backgrounds on the fly, EG:

.Watermarked{
  background: url('text/logo.png') bottom right no-repeat;
}

HTML:

<div class="Watermarked" 
     style="background:url('photos/very_pretty_sunset.jpg') 0 0 no-repeat;">
...

Somehow produces the computed style:

 background: url('text/logo.png') bottom right no-repeat,
             url('photos/very_pretty_sunset.jpg') 0 0 no-repeat;    

Of course I can hard code the extra background style or add it using jquery. I am seeking that sweet, pure, CSS-only solution.

Answered

Accepted thirtydot for the pure CSS answer- “You can’t”.

It’s worth highlighting that if you’re working with SASS (Rails 3.1, etc), the hard-coded styles are more palatable through variable use:

$watermarkImage: url('text/logo.png') left top no-repeat;
...
#very_pretty_sunset{
  background: $watermarkImage, url('photos/very_pretty_sunset.png') right bottom no-repeat;
}

Answer 1

You can’t do that with CSS.

Whichever background is declared with higher specificity will completely override the other one.