Random background image via external CSS file

Question

I need to change the background image of a class randomly using an external CSS file. The image should be randomly selected from the definition path.

I know how to handle this in php, I have to implement it in an external css file.

looking for a css trick.

here are the properties of the css class.

.birthday
 {
   background:url(../images/Bday.jpg) no-repeat center;
   font: bold 25px "trebuchet ms", Tahoma, Verdana, Arial, Helvetica, sans-serif;
   color: #930204;
   padding: 25px 0px 0px 200px;
   height: 195px;
 }  

Way

set as the file structure.

Answer 1

This is not possible with pure CSS.

You can also use javascript for random and set the background image of your site.

see this tutorial.

Randomize Background Image

Impossibly simple randomized image using jQuery

or

Try this method

var images = ['img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg', 'img5.jpg']; 

:

$('body').css({'background-image': 'url(images/' + images[Math.floor(Math.random() *      images.length)] + ')'});

, , ..