PDA

View Full Version : 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
<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.:)


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


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


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:


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

With:


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

So basically your code would be this:


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:


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:


<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


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

Nile
01-11-2009, 01:57 PM
OOps, sorry:


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:


onload="onloadBg"

Silent_Bob
01-11-2009, 09:11 PM
Thanks for trying again, but I still can't get the new version to work, and I just tested the one I thought was working in Explorer and of course it repeated the image all over the screen.

jscheuer1
01-11-2009, 11:04 PM
I haven't been following this thread. However, I can tell you that if you set, what's this for - the body?


body {
background-repeat: no-repeat!important;
}

in your stylesheet and have no other !important directives for the body's background-repeat property, that should prevent background repeat for the body element in all modern browsers.

The same would go for any other element's or selector's background repeat property.

If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

jdragt
10-06-2011, 08:44 PM
this script works great!, however, how can I get this script to randomly rotate through 6-8 images...only lets me go through 3

<script type="text/javascript">
var backgr1="site1.jpg"
var backgr2="airport1.jpg"
var backgr3="transportation1.jpg"
var backgr4="drainage1.jpg"
var backgr5="land1.jpg"
var backgr6="rehab1.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 = ["site1.jpg", "airport1.jpg", "transportation1.jpg", "drainage1.jpg", "land1.jpg", "rehab1.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>

you can see a working demo of it at www.dibblecorp.com/50/index2.php

thanks

chicdisanna
02-07-2012, 07:49 PM
How did you solve this? Did you get it work ok on IE also? I have had centering problems with IE and also the background images are repeating.