CODEWITHSUNDEEP
htmlcss
Shri
Shri

Reputation: 731

Random Background image through external CSS file

I have to change background image of class randomly using external CSS file. Image has to pick randomly from define path.

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

looking for any css trick.

here is css class properties.

.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;
 }

path is given as per file structure.

Upvotes: 4

Views: 3556

Answers (1)

KesaVan
KesaVan

Reputation: 1031

This is not possible using pure CSS.

Also You can use javascript to random and set the background image of your website.

see this tutorial..

Randomize background image

Impossibly simple image randomize with jQuery

or

Try this method

At first create an array of images 

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

Now, set a random image as the background image:

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

I hope this code will help for You, Thanks..

Upvotes: 1

Related Questions