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


Go to End
Reply


12 Posts   2968 Views

Avatar
Juanitou

Community Member, 323 Posts

24 March 2010 at 9:48pm

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

Community Member, 224 Posts

25 March 2010 at 5:26am

Edited: 25/03/2010 5:27am

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

Community Member, 901 Posts

25 March 2010 at 7:51pm

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

Community Member, 224 Posts

26 March 2010 at 1:56am

Edited: 26/03/2010 2:01am

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

Go to Top