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.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

Template Questions /

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

Is there a way to have a random background image loaded?

Go to End

12 Posts   3989 Views


Community Member, 904 Posts

3 February 2010 at 8:19pm

I think your path isn't correct.
Try something like this instead:

body { background: url(mysite/images/background-{$RandomBackgroundNumber}.jpg) 20% 20% no-repeat; } 

Just put the path to the images in there, relative to your website root.


Community Member, 36 Posts

4 February 2010 at 6:11am

As a test I did the full images directory root with this:

(this is what the URL looks like until I activate DNS)

<style type="text/css">
			body { background: url({$RandomBackgroundNumber}.jpg) 20% 20% no-repeat; }

still does not display a background.. thoughts? or did I do that completely wrong?


Community Member, 904 Posts

4 February 2010 at 6:19am

Uhh. looks fine to me.
Although relative paths like I described should work just as well.

Please have a look at the (generated) source code of the Page and tell us how your css style looks there...


Community Member, 36 Posts

4 February 2010 at 6:23am

yeah it looks fine because it was HAHA.
I looked at the source code and it was calling to background-5.jpg
and I only have background-1 through 3.

How can I tell it I only have 3 backgrounds?

	function RandomBackgroundNumber() {
	return rand(1, 3);

I did that because the original had a 6 there. But it still wants to look higher than 3.

Thank you SO much for the help here!

Go to Top