Random Image With CSS?

JavaScript
1

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

2

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

3

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

4

You could try implementing this somehow.

Googling for things like these helps.:slight_smile:

5

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

There its javascript

6

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.

7

Is there an easier way?

8

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

9

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.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](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 :slight_smile:

Paul

10

Exactly what i wanted :slight_smile:

11

Its not working :cry:

12

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

13

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

14

Heres a working example:

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

Are your image paths correct?

Paul

15

Heres my code

CSS


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

Javascript


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


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

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

17

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

18

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

edit: the code is in random.js

19

Fixed Thanks Guys

20

what was it? :slight_smile: