Hi i wonder if you can help me i try to load a different background on my client website like every time the user click the refresh button a different background image display like this website

http://www.madonna.com/music/

Thank You

It seems you have already solved it. In Firefox 3 under Linux I do get a new background image when pressing F5 or the refresh button.

My mistake. Have looked again at the madonna site and still don't know how they do it there, but below is the way I do it. Tested with IE 6 and Firefox (2 and 3).
The background image is fixed on the right site and will not scroll.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	<script  type="text/javascript">
		function changeImg(imgNumber)	{
			var myImages = ["images/image0.jpg", "images/image1.jpg", "images/image2.jpg", "images/image3.jpg"]; 
			var imgShown = document.body.style.backgroundImage;
			var newImgNumber =Math.floor(Math.random()*myImages.length);
			document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
		}
		window.onload=changeImg;
	</script>
	<style type="text/css">
		.bg {background-attachment:fixed; background-repeat: no-repeat; background-position:top right;}

	</style>
</head>
<body class="bg">
	<p>Some text</p>
	<!-- put a lot text lines here to see that the background stays fixed. -->
	<p>Some text</p>
</body>
</html>

Now that i think about it its like every time you refresh, a whole different page is coming up. so i think a random page script will help can someone help me with this please?

Now that i think about it its like every time you refresh, a whole different page is coming up. so i think a random page script will help can someone help me with this please?

I can't see what you mean with "a whole different page is coming up".
Didn't you want a background that behaves the same as the way the madonna site is doing it. That is, a background top-right that doesn't scroll when you scroll the page?
My script is exactly doing that. If you put the rest of you content between the <body class="bg"> and </body> tags, the only thing that changes when refresh the page is the background.

it work like a dream thank you very much

thanks colweb for the code but this is for the page, is there a way to put this code into my stylesheet .css files so that it applies to all pages that pull it.

The css thing can also work but i am not fimiliar with the css thing.

bcadam,

It's very easy. For every page on your site where you want to use this background you load the javascript and css from files, like so:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>The title of your page</title>
	<script type="text/javascript" src="/scripts/background.js"></script>
	<link rel="stylesheet" type="text/css" href="/css/backgroud.css"></link>
</head>
<body class="bg">
	<!-- the rest of your content goes here -->
</body>

background.js

function changeImg(imgNumber) {
	var myImages = ["images/image0jpg", "images/image1.jpg", "images/image2.jpg", "images/image3.jpg"]; 
	var imgShown = document.body.style.backgroundImage;
	var newImgNumber =Math.floor(Math.random()*myImages.length);
	document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
}

window.onload=changeImg;

background.css

.bg {background-attachment:fixed; background-repeat: no-repeat; background-position:top right;}

Don't forget to press the solved button.....

I know this is old but I need help!!! I have tried many many script codes and just can't get the background to change on a refresh. What's wrong with my code?

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Blissful Chocolatiers -</title>
<!-- TemplateEndEditable -->
<link href="../css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function changeImg(imgNumber) {
var myImages = ["..images/main_background.png", "..images/main_background2.png", "..images/main_background3.png", "..images/main_background4.png"];
var imgShown = document.body.style.backgroundImage;
var newImgNumber =Math.floor(Math.random()*myImages.length);
document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
}
window.onload=changeImg;
</script>
<style type="text/css">
.bg {background-attachment:fixed; background-repeat: no-repeat; background-position:top right;}
</style>

<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRtHdr #sidebar1 { width: 220px; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<link href="../css/navbar.css" rel="stylesheet" type="text/css" />

<!-- TemplateParam name="OptionalRegion1" type="boolean" value="true" --><!-- TemplateParam name="OptionalRegion2" type="boolean" value="true" -->
</head>

there is any script to load a different html instead jpg file?
i put some html files and the load a random file?

you can also try jquery plugins, especially if you want some additional functionalities and styling beside randomizing images on load.