Question

I’m looking for code to randomize a background image on one section of a single-page scroll website. I have researched ways of doing this (php/js/html stuff; one ex, second ex), but I couldn’t get it them to work because I don’t want the images to apply to all of the pages/sections and I don’t want it in the “body” of the HTML.” Please advise!

Currently, I change the background in the CSS with backgound-image code of a single class.

Answer 1

This is the PHP code for randomizing background images:

<?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        
?>

And:

<style type="text/css">
.mydiv{
    background: url(images/<?php echo $selectedBg; ?>) no-repeat;
    height:300px;
    width:300px;
}
</style>
<div class="mydiv">

</div>

---

This is the JavaScript and JQuery solution for randomizing background images:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
$('.mydiv').css({
    'background-image': 'url(/path/to/images/' + images[Math.floor(Math.random() *      images.length)] + ')'
});
</script>

See this in action (hit run in top left to randomize the image): http://jsfiddle.net/Kf6sb/