Random Background Image - No repeat?

**Silent_Bob** · 01-10-2009, 09:58 PM

Hi All,

I have been looking all over the web to find what I would have thought to be a very common, simple script, that could randomly change a background image every time the page is reloaded. I finally found this, which worked fine.

<script type="text/javascript">
var backgr1="bg1.jpg"
var backgr2="bg2.jpg"
var backgr3="bg3.jpg"

var cur=Math.round(6*Math.random())
if (cur<=1)
backgr=backgr1
else if (cur<=4)
backgr=backgr2
else
backgr=backgr3
document.write('<body background="'+backgr+'">')
</script>

Could someone please help me make this script load the random image centered at the top of the screen with no repeat. Or if there is a more efficient way of loading random backgrounds please share that method.

Thank you for your time.

**bombusidea** · 01-10-2009, 10:59 PM

http://www.brainjar.com/

this site may help

**magicyte** · 01-10-2009, 11:34 PM

Code:

<html>
<head>
<title>Test</title>
<script type="text/javascript">
var backgrounds = ["bg1.jpg", "bg2.jpg", "bg3.jpg"],
bg,
cur = Math.round(6 * Math.random());

if(cur <= 1) bg = backgrounds[0];
else if (cur<=4) bg = backgrounds[1];
else bg = backgrounds[2];
document.body.style.backgroundImage = bg;
document.body.style.backgroundPosition = "top center"; // can be changed to anything else (e.g. bottom center, top left, center right...)
document.body.style.backgroundRepeat = "no-repeat";
</script>
</head>
<body>
Content...
</body>
</html>

If it doesn't work, your image doesn't exist... Also, don't forget those semi-colons!!

Questions? My code may not work. It is untested.

-magicyte

**Silent_Bob** · 01-11-2009, 03:00 AM

Thank you so much for taking the time magicyte unfortunately I could not get your code to work, I did how ever paste it next to my original code to compare the changes, and that actually worked! I have No idea how, but it looks like a bit of a mess. Any chance you could have a go at cleaning it up for me? I'm still new to this.

Much appreciated.

Code:

<script type="text/javascript">
var backgr1="bg1.jpg"
var backgr2="bg2.jpg"
var backgr3="bg3.jpg"

var cur=Math.round(6*Math.random())
if (cur<=1)
backgr=backgr1
else if (cur<=4)
backgr=backgr2
else
backgr=backgr3
document.write('<body background="'+backgr+'">')

var backgrounds = ["bg1.jpg", "bg2.jpg", "bg3.jpg"],bg,
cur = Math.round(6*Math.random());

if(cur<=1)bg=backgrounds[0];
else if (cur<=4)bg=backgrounds[1];
else bg=backgrounds[2];
document.body.style.backgroundImage=bg;
document.body.style.backgroundPosition="top center"; // can be changed to anything else (e.g. bottom center, top left, center right...)
document.body.style.backgroundRepeat="no-repeat";
</script>

**Nile** · 01-11-2009, 04:00 AM

Here's a cleaner version:

Code:

	var backgr = ['bg1.jpg','bg2.jpg','bg3.jpg'];
	var cur = Math.round(6*Math.random());
	if (cur <= 1) {
		backgr = backgr[0];
	} else if (cur<=4) {
		backgr = backgr[1];
	} else {
		backgr = backgr[2];
	}
	document.write('<body background="'+backgr+'">');
	var backgrounds = ["bg1.jpg", "bg2.jpg", "bg3.jpg"],
	bg,
	cur = Math.round(6*Math.random());
	if(cur<=1){ bg=backgrounds[0]; }
	else if (cur<=4){ bg=backgrounds[1]; }
	else { bg = backgrounds[2]; }
	document.body.style.backgroundImage=bg;
	document.body.style.backgroundPosition="top center"; // can be changed to anything else (e.g. bottom center, top left, center right...)
	document.body.style.backgroundRepeat="no-repeat";

**Silent_Bob** · 01-11-2009, 04:35 AM

Thank you Nile looks better, and still works!

I have one more quick question.

What do I need to change to ad "bg4.jpg", "bg5.jpg", bg6.jpg" images, just adding them to the list didn't work.

**Nile** · 01-11-2009, 04:58 AM

Hmm.. do you want to add them to the backgr array, or the backgrounds array? Anyways, you did this?:

Code:

var x = ['bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg', 'bg5.jpg', 'bg6.jpg'];

And, I would suggest(to make this work, the only way), to replace all the:

Code:

Math.round(6*Math.random());

With:

Code:

Math.round(x.length*Math.random());

So basically your code would be this:

Code:

	var backgr = ['bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg', 'bg5.jpg', 'bg6.jpg'];
	var cur = Math.round((backgr.length)*Math.random());
	document.write('<body background="'+backgr[cur]+'">');
	var backgrounds = ['bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg', 'bg5.jpg', 'bg6.jpg'],
	bg,
	cur = Math.round((backgrounds.length)*Math.random());
	document.body.style.backgroundImage=backgrounds[cur];
	document.body.style.backgroundPosition="top center"; // can be changed to anything else (e.g. bottom center, top left, center right...)
	document.body.style.backgroundRepeat="no-repeat";

Or just to be cleaner:

Code:

	var backgr = ['bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg', 'bg5.jpg', 'bg6.jpg'];
	document.write('<body background="'+backgr[cur]+'">');
	bg,
	cur = Math.round((backgr.length)*Math.random());
	document.body.style.backgroundImage=backgr[cur];
	document.body.style.backgroundPosition="top center"; // can be changed to anything else (e.g. bottom center, top left, center right...)
	document.body.style.backgroundRepeat="no-repeat";

**Silent_Bob** · 01-11-2009, 06:08 AM

Hey Nile thanks a bunch its working exactly the way I needed it to. I couldn't get the second "cleaner" code to work, but the first one worked just fine.

Thanks for all your help, your a legend.

**diltony** · 01-11-2009, 11:16 AM

Here is a shorter version:

Code:

<script type="text/javascript">
var backgr1="bg.jpg"
var backgr2="bg.jpg"
var backgr3="bg.jpg"

var cur=Math.round(6*Math.random())
if (cur<=1)
backgr=backgr1
else if (cur<=4)
backgr=backgr2
else
backgr=backgr3
document.write('<body style="background:no-repeat url('+backgr+')">')
</script>

Same as your original code, just changed the last line.

To center it, change last line of your original code to

Code:

document.write('<body style="background:no-repeat top center url('+backgr+')">')

**Nile** · 01-11-2009, 01:57 PM

OOps, sorry:

Code:

var onloadBg = function(){
	var backgr = ['bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg', 'bg5.jpg', 'bg6.jpg'],
	cur = Math.round((backgr.length)*Math.random());
	document.body.style.backgroundImage="url('"+backgr[cur]+"')";
	document.body.style.backgroundPosition="top center"; // can be changed to anything else (e.g. bottom center, top left, center right...)
	document.body.style.backgroundRepeat="no-repeat";
}

And add the the <body part:

Code: