All geek questions in one place

CSS3 random background images

I make a small website, however I have 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 }
+2
source share
6 answers

You cannot use only html and css for this purpose. You should do this on the client side (e.g. with javascript) or on the server side (e.g. php script)

Here's a 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 a 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)] + ')'});
+10
source

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 will need to name your images with the corresponding random numbers and place them in this image folder.

+8
source

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>
+5
source

Really short option: (if you can use php on the page). Substitute the URLs of your backgrounds for single quoted file names.

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

This is not possible using pure CSS. You should use javascript for random and set the background image of your site.

0
source

Well, the last answer is very short, but what if you put them in the same 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 in order to use the code on your other pages. For example: you save it as "rand.htm". Just replace the <body> with this code.

 <?php include("rand.htm"); ?>
0
source

Source: https://habr.com/ru/post/1497579/

More articles:


All Articles