0

I've added 9 backgrounds in my SiteAssets and I want them to randomly appear when the user clicks on any of the pages?

I've tried the following:

Before the DOCTYPE

<?php
$bg = array('bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.jpg' ); // array of filenames

$i = rand(0, count($bg)-1); // generate random number size of the array
$selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>

In the head section or in the body section

<style type="text/css">
<!--
body{
background: url(images/<?php echo $selectedBg; ?>) no-repeat;
}
-->
</style>

but it didn't work. I think it's because I'm missing the CSS tag for the background in Sharepoint.

Could you help with this?

Thank you in advance.

Edit:

enter image description here

enter image description here

enter image description here

enter image description here

Improve this question
2
  • 1
    PHP? SharePoint does not speak php.
    – teylyn
    Commented Jan 30, 2014 at 20:58
  • Oh ok, I didn't know that. A bit of a newbie. Do you know how to do it without using php? Thanks.
    – Sergiu Tripon
    Commented Jan 30, 2014 at 21:00

2 Answers 2

Reset to default
1

Probably a bit late for you, but for anyone else who comes across this article you can try this link...

[...] this is a quick example of how to randomly change the background image. You’ll probably want to tidy it up for production (checking that certain scripts are loaded, moving the CSS into a file, etc), but it worked for our demo.

First you’ll need to modify the master HTML page and add the following to the <head> section…

<!--MS:<style type="text/css">--> <!--
.backOne{background-image:url('/images/img1.png')}
.backTwo{background-image:url('/images/img2.png')}
.backThree{background-image:url('/images/img3.png')}
--> <!--ME: </style>—>

Thanks to Eric Overfield at PixelMill for the way to add a style to your HTML master page.

Then add a bit of script to the end of the page, just before the </body> tag…

<script>   _spBodyOnLoadFunctionNames.push("swapBodyImage");  
function swapBodyImage(){   var r = Math.random() * 3;   var img =
"backOne";   if (r > 2) img = "backTwo";   else if (r > 1) img =
"backThree";   CSSUtil.AddClass(document.body, img);} </script>

The script will then randomly choose one of your styles and so set the background.

http://blog.thekid.me.uk/post/Random-background-body-images-images-in-SharePoint

Improve this answer
1

You can use some simple JavaScript/jQuery to accomplish this. Checkout this article: http://briancray.com/posts/simple-image-randomizer-jquery. This is the JavaScript the article uses (modified for the body tag):

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg'];
$('body').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});

EDIT

Here is one way you can do it:

  • Add a Content Editor Web Part to the page.

  • With the cursor in the editor portion of the web part (where you would enter content), select Edit Source from the Format Text ribbon tab. This will bring up a box to enter HTML.

  • Add the following: 

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.min.js"></script>    
<script type="text/javascript">

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg'];
$('body').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
</script>

This is loading jQuery from Microsoft's CDN. You can download the library and upload it to your SharePoint site if you want. Then just update the src link to where it is on SharePoint. Replace the image names with your images and replace the "images/" in the background-image property with the path to the images in SharePoint.

Improve this answer
11
  • Hi, thanks for that. I tried adding it onto a script editor, but that didn't seem to work. Where should I apply this piece of code?
    – Sergiu Tripon
    Commented Jan 30, 2014 at 22:00
  • Do you have jQuery loaded on the page?
    – John Chapman
    Commented Jan 30, 2014 at 22:11
  • Hi John, could you guide me on how to get it loading on the page? Which file or part do I have to modify?
    – Sergiu Tripon
    Commented Jan 30, 2014 at 23:51
  • Edited the answer with more details.
    – John Chapman
    Commented Jan 31, 2014 at 3:41
  • Hi John, did exactly what you said, but it didn't work. I've took some print screens which are now in the main question. Could you have a look? Thank you.
    – Sergiu Tripon
    Commented Jan 31, 2014 at 11:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.