Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Random Background Image - No repeat?

  1. #1
    Join Date
    Jan 2009
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default Random Background Image - No repeat?

    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.

  2. #2
    Join Date
    Jan 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    http://www.brainjar.com/

    this site may help

  3. #3
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    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

  4. #4
    Join Date
    Jan 2009
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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>

  5. #5
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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";
    Jeremy | jfein.net

  6. The Following User Says Thank You to Nile For This Useful Post:

    Silent_Bob (01-11-2009)

  7. #6
    Join Date
    Jan 2009
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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.

  8. #7
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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";
    Jeremy | jfein.net

  9. The Following User Says Thank You to Nile For This Useful Post:

    Silent_Bob (01-11-2009)

  10. #8
    Join Date
    Jan 2009
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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.

  11. #9
    Join Date
    Dec 2008
    Location
    Nigeria
    Posts
    97
    Thanks
    3
    Thanked 8 Times in 8 Posts

    Default

    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+')">')

  12. #10
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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:
    onload="onloadBg"
    Last edited by Nile; 01-11-2009 at 02:03 PM.
    Jeremy | jfein.net

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •