I have figured this out - kind of fun.
First I setup my styles in my template... Note the paths...
<% if FormBgImage %>
<style>
#changeformbgsmall {
background-image:url(assets/Forms/Small/$FormBgImage.Name);
background-position:center top;
background-repeat:no-repeat;
}
#changeformbglarge {
background-image:url(assets/Forms/Large/$FormBgImage.Name);
background-position:center top;
background-repeat:no-repeat;
}
</style>
<% else %>
<% if callGlobal.GlFormBgImage %>
<style>
#changeformbgsmall {
background-image:url(assets/Forms/Small/$callGlobal.GlFormBgImage.Name);
background-position:center top;
background-repeat:no-repeat;
}
#changeformbglarge {
background-image:url(assets/Forms/Large/$callGlobal.GlFormBgImage.Name);
background-position:center top;
background-repeat:no-repeat;
}
</style>
<% else %>
<style>
#changeformbgsmall {
background-image:url(assets/System/Forms/Small/form-bg-blue.png);
background-position:center top;
background-repeat:no-repeat;
}
#changeformbglarge {
background-image:url(assets/System/Forms/Large/form-bg-blue.png);
background-position:center top;
background-repeat:no-repeat;
}
</style>
<% end_if %>
<% end_if %>
Note, that I gave my styles an ID #changeformbglarge and #changeformbgsmall
Then in the javascript I am getting the style elements by ID...
<script type="text/javascript">
...
formbgimagesmall = document.getElementById("changeformbgsmall");
formbgimagelarge = document.getElementById("changeformbglarge");
...
</script>
Then in my HTML in the editor, I added the ID to my table tag...
<table border="0" cellspacing="10" cellpadding="0" width="250" id="changeformbgsmall" style="height: 320px;">
By doing it this way, I can apply several images of different sizes from different folders, with the same filename.png
... see image.
And thank you for your help on the .Name option
Steve Nyhof