Yes, you could look at the database fields (table File), but using the Debug() method is even better: http://api.silverstripe.org/default/ViewableData.html#Debug

So, you could have tried: $BackgroundImage.Debug (or the other way round, I’ve not tested a lot yet).

I just discovered it yesterday!

I don’t know nothing about JavaScript, sorry.

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

This seems overly complicated to me. Why do you join a hard-coded path with the $File.Name. Wouldn't something like this be better?

background-image: url($FormBgImage.URL); 

You should also make sure, that you use CSS classes for elements that occur multiple times, because having more than one item with the same ID in your HTML Document makes it invalid HTML.
Also, I don't see what the JavaScript part is for? Do you modify stylesheet properties dynamically?

Hi banal,

I wish I could make it so easy. If you would look close at my code, you would see that I am taking two different files from two different folders by using the .Name only.

If you have a better way to do this, and get that code into the html editor that would be great. I have not been able to add the $Field into the html editor.

Also, were do have have multiple css instances?
Steve