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

HTML & CSS
1

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);}
2

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

3

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


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
html { background:url(/images/gradient.gif) repeat-x 0 0; }
html:before {
	content:" ";
	display:block;
	position:absolute;
	z-index:-1;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:url(/images/ad.gif) no-repeat 0 0;
}
</style>
</head>

<body>
<p>hello</p>
</body>
</html>

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.