Loop random background image - php

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?

Answer 1

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>

Answer 2

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