Random background images CSS3

jquery html css background

83,079

Solution 1

You cant use only html & css for this purpose. You should do it client side(like with javascript) or server side(like a php script)

Here's php example:

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

<style type="text/css">
<!--
body{
background: url(images/<?php echo $selectedBg; ?>) no-repeat;
}
-->
</style>

Here's jquery example:

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg'];
$('html').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});

Solution 2

I would use JS. Take a look at this example:

<html>
<head>
<script type="text/javascript"> 
var totalCount = 8;
function ChangeIt() 
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'bgimages/'+num+'.jpg';
document.body.style.backgroundRepeat = "repeat";// Background repeat
}
</script>
</head>
<body> 
// Page Design 
</body> 
<script type="text/javascript"> 
ChangeIt();
</script> 
</html>

You would need to name your images the proper numbers through the random count and place them in that images folder.

Solution 3

For jQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

    var bgArray = ['bg1.jpg', 'bg2.jpg', 'bg3.jpg'];
    var bg = bgArray[Math.floor(Math.random() * bgArray.length)];

    $('body').css('background', bg);

    // If you have defined a path for the images
    var path = 'images/bg/';

    // then you can put it right before the variable 'bg'
    $('body').css('background', path+bg);

}); 
</script>

Solution 4

Really short option: (if you can use php in the page). Substitute the urls of your backgrounds for the filenames that are in single quotes.

background: url('<?php $a = array('darkred.jpg','red.gif','pink.png'); echo $a[array_rand($a)];?>');

View more solutions

83,079

Author by

user2136883

Updated on January 08, 2020

Comments

user2136883 over 4 years

I am doing small website, however I have like 5-6 images for my background, and I want to make it random every time I refresh the page. This is what I got in style.css :

html {   
    background:  url(image/l2.jpg) no-repeat center center fixed
    -webkit-background-size: cover
    -moz-background-size: cover
    -o-background-size: cover
    background-size: cover   
}

user2136883 about 11 years

ok where exactly I need to put it? in index.html? before DOCTYPE?
MIIB about 11 years

You could use jquery example and place this code at the head tag. Remember include your jquery.js file
user2136883 about 11 years

All images must be in root folder? or it can be still taken from "images" folder?
Matthew Camp about 11 years

They are taken from a folder called 'bgimages'.
user2136883 about 11 years

ok , but I want also other attributes webkit-background-size: cover -moz-background-size: cover -o-background-size: cover background-size: cover
MiniRagnarok about 11 years

user2136883 didn't mention it but he/she tagged jQuery. I'm guessing that's why there's downvotes.
user2136883 about 11 years

ok, it will work as my CSS3 attributes? Stretch to the whole window?
MIIB about 11 years

no problem. You put your css like you did, but also add this code
user2136883 about 11 years

ok i putted inside <head> and it is just showing the same text on webstie
user2136883 about 11 years

where should I place it? will it be stretch backgrounds?
MIIB about 11 years

Did you include jquery? Did you change image array values to the ones you're looking?
Corfitz. about 11 years

between these tags <script type="text/javascript"> and </script> inside the head tag as Matthew Camp has shown. and then you need to refer to the jQuery library: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jque‌ry.min.js"></script> also inside the head tag.
user2136883 about 11 years

I ve downloaded jquery and placed it on folder. Yes I changed everything similar to code
Corfitz. about 11 years

check edit. Just copy the code and insert it inside the head tag. The part with comments can be deleted if there is no path to the images.
MIIB about 11 years

You should add <script src="jquery.js"></script> in your head before code
user2136883 about 11 years

ok I did. now there is no background at all. Do I need to change something in style.css?
user2136883 about 11 years

I did everything you said, still got white background. =(
MIIB about 11 years

Did you change the var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg']; array? You should change the name to your images names
user2136883 about 11 years

Can I send my files to you by email?
MIIB about 11 years

i think you cant do this in stackoverflow
niico over 9 years

this is a front end question - php is a back end language; no need to use that.
Zonker.in.Geneva about 5 years

if you're going to use PHP, then you might as well use scandir to get the list of images in the folder, rather than hardcoding them.