10

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   
}
5
  • What have you tried?
    – Chad
    Mar 5, 2013 at 18:56
  • I ve tried the php example below, like 2 days ago and it was not working. Might be the reason that I putted it somewhere wrong Mar 5, 2013 at 19:00
  • you can't use the PHP if your file extension is .html.. that could be the problem.
    – Corfitz.
    Mar 5, 2013 at 19:05
  • no I ve changed it of course to .php,still not Mar 5, 2013 at 19:08
  • Are you running it using a WAMP / MAMP or directly on an Apache Server?
    – Corfitz.
    Mar 5, 2013 at 19:14

6 Answers 6

19

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)] + ')'});
13
  • ok where exactly I need to put it? in index.html? before DOCTYPE? Mar 5, 2013 at 18:57
  • You could use jquery example and place this code at the head tag. Remember include your jquery.js file
    – MIIB
    Mar 5, 2013 at 19:00
  • ok , but I want also other attributes webkit-background-size: cover -moz-background-size: cover -o-background-size: cover background-size: cover Mar 5, 2013 at 19:03
  • no problem. You put your css like you did, but also add this code
    – MIIB
    Mar 5, 2013 at 19:10
  • ok i putted inside <head> and it is just showing the same text on webstie Mar 5, 2013 at 19:19
9

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.

3
  • All images must be in root folder? or it can be still taken from "images" folder? Mar 5, 2013 at 19:02
  • They are taken from a folder called 'bgimages'. Mar 5, 2013 at 19:03
  • ok, it will work as my CSS3 attributes? Stretch to the whole window? Mar 5, 2013 at 19:06
8

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>   
4
  • where should I place it? will it be stretch backgrounds? Mar 5, 2013 at 19:20
  • 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/jquery.min.js"></script> also inside the head tag.
    – Corfitz.
    Mar 5, 2013 at 19:25
  • 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.
    – Corfitz.
    Mar 5, 2013 at 19:27
  • I did everything you said, still got white background. =( Mar 5, 2013 at 19:36
3

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)];?>');
0

This is not possible using pure CSS. You must to use javascript to random and set the background image of your website.

1
  • user2136883 didn't mention it but he/she tagged jQuery. I'm guessing that's why there's downvotes. Mar 5, 2013 at 19:06
0

Well, the last answer is very short, but how if you put them in one folder?

<?php
$pt = 'BGs/';  //folder where you put your BGs       
$bg = array($pt.'bg_ants.png', $pt.'bg_boobs.png', $pt.'bg_circles.png' ); // array of filenames
?>
<Body background="<?php echo $bg[array_rand($bg)]; ?>">

You can save it in one file and include it to use the code at your other pages. For example: you save it as "rand.htm". Just replace the <body> tag with this code.

<?php include("rand.htm"); ?>
1
  • 1
    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. Mar 7, 2019 at 23:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.