load different background image when user refresh

Question

amarula25 0 Newbie Poster

14 Years Ago

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

web-design

7 Contributors
14 Replies
3K Views
4 Years Discussion Span
Latest Post 10 Years Ago Latest Post by vjproduction

All 14 Replies

colweb 13 Posting Whiz

14 Years Ago

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.

colweb 13 Posting Whiz

14 Years Ago

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 14 Years Ago by colweb because: corrected grammer mistakes

colweb 13 Posting Whiz

14 Years Ago

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.

colweb 13 Posting Whiz

14 Years Ago

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

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

amarula25 0 Newbie Poster · Answer 1 · 2009-10-07T22:24:41+00:00

this is not my website it is a website of madonna my website is at www.rudibuysonline.com

amarula25 0 Newbie Poster · Answer 2 · 2009-10-08T16:14:14+00:00

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?

amarula25 0 Newbie Poster · Answer 3 · 2009-10-08T22:35:32+00:00

amarula25 0 Newbie Poster

14 Years Ago

i will try that thanx

amarula25 0 Newbie Poster · Answer 4 · 2009-10-09T12:29:30+00:00

amarula25 0 Newbie Poster

14 Years Ago

it work like a dream thank you very much

bcadam 0 Newbie Poster · Answer 5 · 2009-10-15T01:13:42+00:00

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.

amarula25 0 Newbie Poster · Answer 6 · 2009-10-15T11:37:44+00:00

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

MoShapes 0 Newbie Poster · Answer 7 · 2011-01-28T08:03:32+00:00

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" />

<title>Blissful Chocolatiers -</title>

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

<link href="../css/navbar.css" rel="stylesheet" type="text/css" />

</head>

Hipolito 0 Newbie Poster · Answer 8 · 2013-11-27T01:32:12+00:00

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

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 9 · 2013-11-27T02:50:23+00:00

The user is going to access your website by hitting a specific web page. What you can do is redirect the user to a random page on your site.

There was a similar recent discussion about redirecting and random pages. Take a look: http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/467181/delayed-auto-redirect-to-a-random-url.-just-a-little-help-needed

vjproduction 0 Newbie Poster · Answer 10 · 2013-11-28T12:57:45+00:00

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

load different background image when user refresh

Recommended Answers Collapse Answers

All 14 Replies

Recommended Answers