Multiple background images. Do I need another container or generated content?

I have a cms that uses templates. I’m using the CMS to dynamically create a stylesheet that’s inserted below the template’s stylesheet at runtime. Based on the user’s design settings, I’m adding a background image to the html element in this custom stylesheet.

The problem is the some templates are already using the html element to place a background image via their stylesheets.

And, since my dynamic css gets included after the template’s stylesheet, my background setting trumps the template’s.

I want to preserve both background images and have them layer over one another as if they were assigned as multiple backgrounds like:

html {background:url(topBG.png), url(bottomBG.png)}

Does anyone know if theres perhaps a way that I’m missing to deal with this via the cascade? Or is generated content an option?

Template stylesheet may contain:

html {background:url(bottomBG.png);}

Dynamically generated stylesheet will contain:

html {background:url(topBG.png);}

Thanks for the example Paul. Works a charm :wink:

Without using the css3 multiple backgrounds you could use generated content for another image like so:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
html { background:url(/images/gradient.gif) repeat-x 0 0; }
html:before {
	content:" ";
	background:url(/images/ad.gif) no-repeat 0 0;


You may need to test if you have full repeating images and make sure that stacking levels are working. The demo above seems to work ok.