CODEWITHSUNDEEP
javascriptphpjquerycssrandom
Barcin
Barcin

Reputation: 13

Random background image for each div with the same class

I would like to apply random background to each div with an .item class.

I tried to do this with PHP and CSS, something like this:

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

.item {
  background: url(example.com/images/<?php echo $selectedBg; ?>);
}

It works, but every div has exactly the same background image (for example bg3.jpg), and I would like each individual div to have different random background (I don't mind if they repeat once in a while).

I tried this:

.item {
background: url(<?php echo "example.com/images/bg".rand(1, 5).".jpg"; ?>)

with the same result.

I suppose I need to use JavaScript (which I have absolutely no experience with) to achieve that. I found a working solution for random background color: http://jsfiddle.net/VXG36/1/

I would like to do exactly the same thing, but with background images.

Upvotes: 1

Views: 1364

Answers (2)

SaidbakR
SaidbakR

Reputation: 13544

Just encapsulate your php code into a function and then use inline style for each div, because regarding less where you repeated the class definition, the last one definition who will work only.

For eaxmple:

    <?php
    function randImage(){
       $bg = array('bg1.jpg', 'bg2.jpg', 'bg3.jpg', 'bg4.jpg', 'bg5.jpg' );
       $i = rand(0, count($bg)-1);
       $selectedBg = "$bg[$i]";
       return $selectedBg;
    }

    ?>
    <div style="background: url(example.com/images/bg<?php echo randImage(); ?>)">Div 1</div>
    <div style="background: url(example.com/images/bg<?php echo randImage(); ?>)">Div 2</div>
<div style="background: url(example.com/images/bg<?php echo randImage(); ?>)">Div 3</div>

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65796

Just add any image URLs to the array. The more images you add, the less chance for repetition.

See comments inline below for explanations:

// Set up your array with the URLs of the background images you'll want:
var randomImagess = [
 "http://laoblogger.com/images/image-of-smiley-face-6.jpg",
 "http://images.clipartpanda.com/smiley-face-clip-art-RcGG8gecL.jpeg",
 "http://images.clipartpanda.com/smiley-face-thumbs-up-thank-you-10_smiley_face.jpg",
 "https://clipartion.com/wp-content/uploads/2015/12/green-smiley-face-images-stock-free-green-830x830.jpg",
 "https://image.freepik.com/free-photo/cartoon-smile-samuel-smiles-smiley-face-team_121-67198.jpg",
 "https://i.pinimg.com/236x/ed/e7/08/ede7084f513353a377a4e841d7ba90ed--smiley-face-images-smiley-faces.jpg",
 "https://cdn.schoolstickers.com/products/en/819/GREEN-SMILE-00.png",
 "https://buildahead.com/wp-content/uploads/2017/02/happy-emoji-smaller-300x300.png",
 "https://i.pinimg.com/236x/85/7d/22/857d22615fd70ccbfa10afdffff0eb1b--mad-face-smiley-faces.jpg"
];
    
// Get all the div elements with the item class into a collection
var divs = document.querySelectorAll("div.item");

// Convert the collection into an array so that we can loop with .forEach
var divArray = Array.prototype.slice.call(divs);

//Loop over the array...
divArray.forEach(function(div) {
  // Get a random number from 0 to the highest index in the array
  var randomNum = Math.floor(Math.random() * randomImagess.length);
  // Set the backgroundImage property to the random URL
  div.style.backgroundImage = "url(" + randomImagess[randomNum] + ")";
});
div.item {
  /* These styles are just for making sure the demo fits in the preview area. */
  width:175px;
  height:175px;
  float:left;
  border:1px solid black;
  
  /* Use background-size:contain to fit the entire image into the div's space. This 
     wil make the image zoom in/out as needed to completely fit.
     Or, use background-size:cover to scale the image to fit the space of the div. */
  background-size:cover; 
}
<div class="item">Div 1</div>
<div class="item">Div 2</div>
<div class="item">Div 3</div>

Upvotes: 1

Related Questions