Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Set a Background Image


Reply

12 Posts   2834 Views

Avatar
Juanitou

24 March 2010 at 9:48pm Community Member, 323 Posts

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.

Avatar
steve_nyhof

25 March 2010 at 5:26am (Last edited: 25 March 2010 5:27am), Community Member, 224 Posts

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

Attached Files
Avatar
banal

25 March 2010 at 7:51pm Community Member, 901 Posts

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?

Avatar
steve_nyhof

26 March 2010 at 1:56am (Last edited: 26 March 2010 2:01am), Community Member, 224 Posts

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