Today I discovered that CSS3 has the capability to support multiple backgrounds, which is truly amazing. What I would love is the option to combine multiple backgrounds dynamically, like this:
.Watermarked{
background: url('text/logo.png') bottom right no-repeat;
}
Implementing this in HTML:
<div class="Watermarked"
style="background:url('photos/very_pretty_sunset.jpg') 0 0 no-repeat;">
...
This should result in the computed style being:
background: url('text/logo.png') bottom right no-repeat,
url('photos/very_pretty_sunset.jpg') 0 0 no-repeat;
Although I can manually hard code the extra background style or use jquery to add it. However, I am searching for a pure CSS-only solution.
Answered
I have received an answer from thirtydot stating that the pure CSS answer is "You can't".
It is worth noting that when working with SASS (such as in Rails 3.1, etc), utilizing hardcoded styles becomes more manageable through variable usage:
$watermarkImage: url('text/logo.png') left top no-repeat;
...
#very_pretty_sunset{
background: $watermarkImage, url('photos/very_pretty_sunset.png') right bottom no-repeat;
}