Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Theme > Random Background Image
Mottie (SuperAdmin) 7/1/2008 7:02 AM EST : Random Background Image
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

How to add a background image that changes when you reload the page

GuildPortal admin site link to original post

This script is basically a copy of the "random banner image" post. Add this script into your banner or footer area HTML (Control Panel > Style & Colors > Banner Area). Change the image URL (in orange) to your images. The background options "bkgdOptions" in blue will position (center, top, bottom, left, right) and set the background repeat (no-repeat, repeat-x, repeat-y or repeat).
<script type="text/javascript">
var bkgd = [],

// **************************************
// Add background images below
// bkgd.push ("
Add URL here");
// **************************************


bkgdOptions = '#000000 center top no-repeat'; // background color, image left & top position, and repeat

bkgd.push ("http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/green.jpg");
bkgd.push ("http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/bkgd_stone1.jpg");
bkgd.push ("http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/bkgd_default.jpg");
bkgd.push ("http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/bkgd_parch2.jpg");

// **************************************
// Don't change anything below this line
// **************************************

var inc = Math.floor( Math.random() * bkgd.length ),
 bkgdimg = "<style>body {background: url(" + bkgd[inc] + ") " + bkgdOptions + ";}</style>";
document.write(bkgdimg);
</script>
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

invaderbold (Applicant) 8/14/2012 2:00 PM EST : RE: Random Background Image

invaderbold
Posts: 238

0
Like

0
Dislike

This is close to what I want. However I would like the random background images to also auto resize to fit the browser size. Similiar to how THIS works.
What would I change to do that? Thanks!
TopBottom

Mottie (SuperAdmin) 8/15/2012 10:48 AM EST : RE: Random Background Image
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Invaderbold!

Did you try adding the bit of css? It should allow you to combine both. So add the code above, then add this to your custom css section (Control Panel > Custom HTML & Script > Custom CSS > CSS Additions to Standard)
body {
 background: #000 url(my-background-image.jpg) center center fixed no-repeat;
 -moz-background-size: cover;
 background-size: cover;>
}
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

invaderbold (Applicant) 8/15/2012 11:03 AM EST : RE: Random Background Image

invaderbold
Posts: 238

0
Like

0
Dislike

Hmmm the script seems to be overriding whatever custom CSS i put in. Also im not sure how to use that CSS as I have 4 background images I would like to rotate, here are some screenshots of what I am doing.
With these settings what happens is the background images rotate but they don't stretch to fit and the images are not fixed, scrolling the page makes the images disappear. Also my banner disappears
www.guildportal.com/Guild.aspx?GuildID=148555


CSS


TopBottom

Mottie (SuperAdmin) 8/20/2012 12:12 PM EST : RE: Random Background Image
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Invaderbold!

Sorry, had a busy and distracting weekend... anyway, I steered you wrong. The javascript overrides the css settings, so that's why it didn't work. Try this code instead:

Entire Site (this will give the entire site random background images)
CSS (copy this css into the custom css area (Control Panel > Custom HTML & Script > Custom CSS > CSS Additions to Standard)

body {
    background: #000000 center top no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Script (copy this code into the custom script area (Control Panel > Custom HTML & Script > Custom JS/JQuery > Document Ready Event)

var bkgd = [];
// **************************************
// Add background images below
// bkgd.push ("Add URL here");
// **************************************


bkgd.push ("http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/green.jpg");
bkgd.push ("http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/bkgd_stone1.jpg");
bkgd.push ("http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/bkgd_default.jpg");
bkgd.push ("http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/bkgd_parch2.jpg");

// **************************************
// Don't change anything below this line
// **************************************

var inc = Math.floor( Math.random() * bkgd.length );
$('body').css("background-image", "url(" + bkgd[inc] + ")");
One Page ( this will only effect the one page that has this code inside of a Free Form Text/HTML Widget. Make sure you paste this code into the editor while it is in "RAW" mode (upper right corner) )
<style>
body {
    background: #000000 center top no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var bkgd = [];
// **************************************
// Add background images below
// bkgd.push ("Add URL here");
// **************************************


bkgd.push ("http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/green.jpg");
bkgd.push ("http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/bkgd_stone1.jpg");
bkgd.push ("http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/bkgd_default.jpg");
bkgd.push ("http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/bkgd_parch2.jpg");

// **************************************
// Don't change anything below this line
// **************************************

var inc = Math.floor( Math.random() * bkgd.length );
$('body').css("background-image", "url(" + bkgd[inc] + ")");
});
</script>
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

invaderbold (Applicant) 8/20/2012 12:42 PM EST : RE: Random Background Image

invaderbold
Posts: 238

0
Like

0
Dislike

Mottie you are an amazing person.
Thanks so much!! This is working great.

I went ahead and added the "fixed" command so the images don't resize too large.
  background: #000000 center top fixed no-repeat;
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%