7
Contributors
14
Replies
27
Views
8 Years
Discussion Span
Last Post by vjproduction
0

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.

1

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>

Edited by colweb: corrected grammer mistakes

0

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?

0

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.

0

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.

0

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

0

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

0

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>

0

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

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.