Random Image With CSS?

**MadSpikey** · Nov 6, 2004 20:09

How can i have a random bg image with pure css?

**swishstudios** · Nov 6, 2004 20:43

As far as I know, css cannot display random images. You need some other type of language such as javascript or php.

**MadSpikey** · Nov 6, 2004 21:24

No i mean i have a banner and its a bg image im looking for a script javascript etc to make it random

**Egor** · Nov 6, 2004 21:29

http://www.javascriptkit.com/script/cut176.shtml

You could try implementing this somehow.

Googling for things like these helps.

**MadSpikey** · Nov 6, 2004 21:32

Yeag i saw that but i need something like that but the bg img is CSS

There its javascript

**Egor** · Nov 6, 2004 21:37

Then you need to make additional stylesheets, just like on sites that have switchable themes. And then fish for a javascript that picks a random stylesheet on load.

**MadSpikey** · Nov 6, 2004 23:23

Is there an easier way?

**Egor** · Nov 7, 2004 03:01

Not that I know of. I am not an expert on those things, but it seems the obvious way.

**Paul O'B** · Nov 7, 2004 07:32

Hi,

I'm not quite sure what you are asking for but if you want to change the background image of an element randomly then one of the scripts mstwntd linked to should do what you want.

I know nothing of javascript but it seems something like this would work.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#banner {
 height:100px;
 border:1px solid #000;
 background:#ffffcc url(images/pmoblogo5.jpg) no-repeat center center;
}
</style>
<script type="text/javascript"> 
<!-- 
if (document.getElementById) { window.onload = swap };
function swap() {
var numimages=7;
rndimg = new Array("images/pmoblogo7.jpg", "images/pmoblogo6.jpg", "images/pmoblogo5.jpg", "images/pmoblogo4.jpg", "images/pmoblogo3.jpg", "images/pmoblogo2.jpg", "images/pmoblogo.jpg"); 
x=(Math.floor(Math.random()*numimages));
randomimage=(rndimg[x]);
document.getElementById("banner").style.backgroundImage = "url("+ randomimage +")"; 
}
//--> 
</script>
</head>
<body >
<div id="banner"></div>
</body>
</html>

But you may be better off asking someone who knows what they're doing

Paul

**MadSpikey** · Nov 7, 2004 12:57

Exactly what i wanted

**MadSpikey** · Nov 7, 2004 13:19

Its not working :'(

**Paul O'B** · Nov 7, 2004 14:32

lol - have you got a link to the page in question?

**MadSpikey** · Nov 7, 2004 15:33

No its on my computer but i refresh like crazy and nothing

**Paul O'B** · Nov 7, 2004 16:33

Heres a working example:

http://www.pmob.co.uk/temp/randombgimage2.htm

Are your image paths correct?

Paul

**MadSpikey** · Nov 7, 2004 16:38

Heres my code

CSS

Code:

#banner{
background-image:url(images/bannermain.jpg);
width:607px; 
height:85px;
float:left;
}

Javascript

Code:

if (document.getElementById) { window.onload = swap };
function swap() {
var numimages=2;
rndimg = new Array("images/bannermain.jpg", "images/gba_over.gif"); 
x=(Math.floor(Math.random()*numimages));
randomimage=(rndimg[x]);
document.getElementById("banner").style.backgroundImage = "url("+ randomimage +")"; 
}

Banner

Code:

<div id="banner"></div>

**Paul O'B** · Nov 7, 2004 17:02

Hi,

I just copied your code and put in my images and it worked fine so you must have the incorrect image/path names. Do you have a directory called images with those 2 files in them?

As you only have 2 random images sometimes the same image will be selected as there is only 2 to choose from. As you can see from my example everything is working ok.

Paul

**MadSpikey** · Nov 7, 2004 17:32

Yeah i dod have them in images director but i link to the javascript file, could that be the problem?

**MadSpikey** · Nov 7, 2004 17:37

i uploaded to www.n-wired.com/sitepoint/mai

edit: the code is in random.js

**MadSpikey** · Nov 7, 2004 17:59

Fixed Thanks Guys

**Paul O'B** · Nov 7, 2004 18:44

what was it?

**MadSpikey** · Nov 7, 2004 18:53

It was having problems dou to another pieice of javascript :P

**Zapita** · Nov 15, 2004 10:36

how can you assign a different link to each image??

can you set each one a different % to show?? for example, one 50% of the times, anotehr 15%, a third one 35%?

thanks n-n

**jturmel** · Apr 21, 2005 09:52

You would need some sort of database to store how many times each image has been displayed, similar to an ad tracking system.

-J

**NewBeee** · Aug 24, 2009 23:42

im having issue displaying the images. on the page i get this code displaying

Code:

 2:27 AM 8/17/2009 if (document.getElementById) { window.onload = swap }; function swap() { var numimages=2; rndimg = new Array("Images/FIL3902.JPG", "Images/FIL3903.JPG", "Images/FIL3904.JPG", "Images/FIL3905.JPG", "Images/FIL3906.JPG"); x=(Math.floor(Math.random()*numimages)); randomimage=(rndimg[x]); document.getElementById("picture").style.backgroundImage = "url("+ randomimage +")"; }

i put the script in the head part and added the

Code:

 div#picture{
background-image:url(Images/FIL3908.jpg);
width:607px; 
height:85px;
float:left;
}

in the styles sheet. but it isnt working for me. any help please

**Paul O'B** · Aug 25, 2009 01:38

You have 5 images so you need to change the variable to 5.

Code:

var numimages=5;

I assume this code isn't present in your actual script:

Code:

 2:27 AM 8/17/2009

Get rid of it if it is.

If it's still not working provide a link or the full html/css.

User Tag List

Thread: Random Image With CSS?

Thread Tools

Display

Random Image With CSS?

Bookmarks

Bookmarks

Posting Permissions