...

View Full Version : Random background image



ekamrec
06-13-2012, 11:30 PM
Hey,

Im sorry for bothering you with this but Im creating this website with a basic right sidebar structure and with full page background image.
I used this CSS3 code to make it fit the page as seen on http://css-tricks.com/perfect-full-page-background-image/
so the body css part looks like this atm:


body {
background-attachment: fixed;
background-clip: border-box;
background-color: transparent;
background-image: url("images/backg.jpg");
background-origin: padding-box;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border: 0 none;
font-size: 90%;
height: 100%;
margin: 0;
min-width: 600px;
padding: 0;
width: 100%;
}

However I have around 7 different background images that I wanted to use so they replace themselves every time the user refreshes their page. I found some codes online obviously but I can't seem to make any of them work, plus I don't think PHP works on the place where I'm testing the website :/

Thank you so much in advance for any help!!

SeattleMicah
06-13-2012, 11:46 PM
what you probably will want to look up is implementing a javascript array, and passing that array randomly through the background asset. Shouldn't be too difficult.

ekamrec
06-13-2012, 11:50 PM
what you probably will want to look up is implementing a javascript array, and passing that array randomly through the background asset. Shouldn't be too difficult.

I found some javascript codes related to this at http://icodesnip.com/search/actionscript:%20random%20image/2
they dont seem to work with my css bg code or something though :confused: sorry if I'm really clueless here :(

Flames
06-14-2012, 12:03 AM
body {
background-attachment: fixed;
background-clip: border-box;
background-color: transparent;
background-image: url("images/backg.jpg");
background-origin: padding-box;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border: 0 none;
font-size: 90%;
height: 100%;
margin: 0;
min-width: 600px;
padding: 0;
width: 100%;
}

The Javascript might not be working because you already have a background image set in your CSS, so the images are replacing each other behind that.

ekamrec
06-14-2012, 12:12 AM
body {
background-attachment: fixed;
background-clip: border-box;
background-color: transparent;
background-image: url("images/backg.jpg");
background-origin: padding-box;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border: 0 none;
font-size: 90%;
height: 100%;
margin: 0;
min-width: 600px;
padding: 0;
width: 100%;
}

The Javascript might not be working because you already have a background image set in your CSS, so the images are replacing each other behind that.

I tried removing that when using the javascript codes though but just wondering if I do remove that part won't it affect the CSS3 code to make the perfect full page background image thing?
thanks!

Flames
06-14-2012, 12:48 AM
I tried removing that when using the javascript codes though but just wondering if I do remove that part won't it affect the CSS3 code to make the perfect full page background image thing?
thanks!

It shouldn't. The full page background (your body div) is set with the height and width being 100%. What you're doing now is setting a background to that div, it shouldn't affect the Javascript.

Mind posting the Javascript code too?

felgall
06-14-2012, 03:36 AM
All you need in the JavaScript is:


(function() {
"use strict";
var imgs = [];
imgs[0] = 'backg1.jpg";
imgs[1] = 'backg2.jpg";
imgs[2] = 'backg3.jpg";
imgs[3] = 'backg4.jpg";

document.getElementsByTagName('body')[0].style.backgroundImage = 'url("images/'+imgs[Math.floor(Math.random()*imgs.length)]+'")';
})();

ekamrec
06-14-2012, 09:52 AM
Thanks so much everyone!!

I used this simple one and it's working now:


<script type="text/javascript">
// # of images
var imgCount = 4;
// image directory
var dir = 'images/';
// random the images
var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
// array of images &amp; file name
var images = new Array
images[1] = "bg1.jpg",
images[2] = "bg2.jpg",
images[3] = "bg3.jpg",
images[4] = "bg4.jpg";
document.body.style.backgroundImage = "url(" + dir + images[randomCount] + ")";
</script>

I couldn't make the code that doesn't allow successive bg images to be the same the 1st time after we reload to work though

ekamrec
06-14-2012, 10:34 AM
according to my view use javascript array to every background image,

like a similar code to the last one I posted for each background image? :/
ty

nickslick
06-14-2012, 02:52 PM
wouldn't using a random background image be very very unattractive to visitors & may prevent future visits?

fairfax
06-14-2012, 05:03 PM
I've done similar things in the past with CGI. I just point the image source to the script but that was so 90s.Nice function but why cram it all on one line?
If the OP wants to rotate the images then the script is still a good place to start.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum