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

  • 1
    PHP? SharePoint does not speak php. – teylyn Jan 30 '14 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 Jan 30 '14 at 21:00
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

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.

  • 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 Jan 30 '14 at 22:00
  • Do you have jQuery loaded on the page? – John Chapman Jan 30 '14 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 Jan 30 '14 at 23:51
  • Edited the answer with more details. – John Chapman Jan 31 '14 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 Jan 31 '14 at 11:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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