Loop random background image

Question

I want to show a random background image, that starts a loop of random other background images after five seconds.

First I create an array for my background-images:

<?php
  $bg = array('bg1.jpg', 'bg2.jpg', 'bg3.jpg', 'bg4.jpg', 'bg5.jpg', 'bg6.jpg', 'bg7.jpg', 'bg8.jpg', 'bg9.jpg', 'bg10.jpg', 'bg11.jpg');
  $i = rand(0, count($bg)-1);
  $selectedBg = "$bg[$i]";
?>

Second I append a random image to my body:

<style>
 @media screen and (min-width: 600px) {
    body {
      background-image: url(<?php bloginfo('template_url'); ?>/images/backgrounds/<?php echo $selectedBg; ?>);
    }
 }
</style>

Now I would like to use php or jQuery to select another random image and change the background. How can I achieve this?

Send the image list as JSON literal along. Or if the images are enumerated anyway, just `rand(1,11)` in JS and rebuild the path there. (Or as in: [Random CSS background image](http://stackoverflow.com/q/26682838) or [Random background image with corresponding attribution link?](http://stackoverflow.com/q/28688925)) — mario, Aug 31 '15 at 08:38

Eloims · Accepted Answer · 2015-08-31T09:09:05.747

3

If you want to loop your background image every 5 seconds (without having the user reloading the page), you can't do it on PHP, it must be done client side (Javascript).

PHP is a tool to generate the HTML code that will be rendered on the user's browser, but it can't change the page afterward, which is what javascript is made for.

<script type="text/javascript">

    // declare list of backgrounds
    var images = ['bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.jpg'];

    // declare function that changes the background
    function setRandomBackground() {
        // choose random background
        var randomBackground = images[Math.floor(Math.random() * images.length)];

        // set background with jQuery
        $('body').css('background-image', 'url("images/' + randomBackground + '")');
    }

    // declare function that sets the initial background, and starts the loop.
    function startLoop() {
        // Set initial background.
        setRandomBackground();

        // Tell browser to execute the setRandomBackground every 5 seconds.
        setInterval(setRandomBackground, 5 * 1000);
    }

    // One the page has finished loading, execute the startLoop function
    $(document).ready(startLoop);

</script>

edited Aug 31 '15 at 09:09

answered Aug 31 '15 at 08:44

Eloims

5,106
4
25
41

Thanks a lot for this suggestion @Eloims. The only part of your code I do not understand is the `5 * 60 * 1000`. Does javascript count in milliseconds and you are calculating it (using 5 * 60)? Where das the 1000 come from? – Marian Rick Aug 31 '15 at 08:48
The setInterval parameters is in milliseconds. the 5*60*1000 meant "5 minutes". I could have written "300000" instead of "5*60*1000", but that's way harder to read. Anyway, I corrected it to "5 * 1000" since you wanted 5 seconds, not 5 minutes. My mistake! – Eloims Aug 31 '15 at 08:52
While testing your snipped I had to add `url()` to the `background-image` to make it work. You can check this right here: http://jsfiddle.net/qhomove2/4/ Is this an necessary adjustment? If so please add it to your answer, so that I can mark it as the correct one! – Marian Rick Aug 31 '15 at 09:07
yes it is. sorry for the typo, i did not actually test the code :) – Eloims Aug 31 '15 at 09:09

Kamil Bogumił · Answer 2 · 2015-08-31T09:14:38.700

try using less and js like:

    var timeout = 1000;      
    var action = function() {    
        var random = Math.floor(Math.random() * 6) + 1 ;
        if(random.length<=1){random = '0'+random;}
        var wynikLos = 'path/to/file/bg-'+random+'.jpg';
        less.modifyVars({
          '@img': wynikLos
        });
        setTimeout(action, timeout);
    };
    action();

In Less:

body{background-image:@img;}

http://lesscss.org/

p.s. not tested

Loop random background image

2 Answers2