Random Image With CSS?

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.:slight_smile:

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.:wink:


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)">
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#banner {
 border:1px solid #000;
 background:#ffffcc url(images/pmoblogo5.jpg) no-repeat center center;
<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"); 
document.getElementById("banner").style.backgroundImage = "url("+ randomimage +")"; 
<body >
<div id="banner"></div>

But you may be better off asking someone who knows what they’re doing :slight_smile:


Exactly what i wanted :slight_smile:

Its not working :cry:

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:


Are your image paths correct?


Heres my code




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


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


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.


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

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

edit: the code is in random.js

Fixed Thanks Guys

what was it? :slight_smile: