How can i have a random bg image with pure css?
As far as I know, css cannot display random images. You need some other type of language such as javascript or php.
No i mean i have a banner and its a bg image im looking for a script javascript etc to make it random
You could try implementing this somehow.
Googling for things like these helps.
Yeag i saw that but i need something like that but the bg img is CSS
There its javascript
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.
Is there an easier way?
Not that I know of. I am not an expert on those things, but it seems the obvious way.
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
Paul
Exactly what i wanted
Its not working
lol - have you got a link to the page in question?
No its on my computer but i refresh like crazy and nothing
Heres a working example:
http://www.pmob.co.uk/temp/randombgimage2.htm
Are your image paths correct?
Paul
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>
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
Yeah i dod have them in images director but i link to the javascript file, could that be the problem?
Fixed Thanks Guys
what was it?