Need to set styling rules to a JavaScript image randomizing script

Question

I am trying to set the background images to be fixed and be stretched to fit the screen. the js that i am using if to switch the backgroud image on every pageload

Head

<script language="JavaScript">
<!-- Activate cloaking device
var randnum = Math.random();
var inum = 1;
// Change this number to the number of images you are using.
var rand1 = Math.round(randnum * (inum-1)) + 1;
images = new Array
images[1] =    "http://simplywallpaper.net/pictures/2010/10/22/how_to_train_your_dragon_monstrous-nightmare.jpg"
images[2] = "tiler3.jpg"
images[3] = "wicker3.jpg"
images[4] = "aaa4.jpg"
// Ensure you have an array item for every image you are using.
var image = images[rand1]
// Deactivate cloaking device -->
</script>

Body

<script language="JavaScript">
<!-- Activate cloaking device
document.write('<body background="' + image + '" text="white" >')
</script>

The js itsself works fine to randomize the images but is currently set to 1 image

I would checkout these two questions: http://stackoverflow.com/questions/376253/stretch-and-scale-css-background/388817#388817 http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only — hugo der hungrige, Nov 10 '13 at 00:57
i have tried the 2 links but i can seam to set the id for the image. it breaks the script. — , Nov 10 '13 at 05:17

mr rogers · Answer 1 · 2013-11-10T19:21:36.010

inum needs to be set to something other than 1. You can set it to the number of images in the array.

Also, arrays start with index 0, so to be safer, you should index your array accordingly.

<script language="JavaScript">

// setup your image array
var images = new Array;
images[0] = "firstImage.jpg";   
... 
images[4] = "lastImage.jpg";

// alternative image array setup
var images = [ 'firstImage.jpg', 'secondImage.jpg', ... ,'lastImage.jpg' ];

// check to see if the image list is empty (if it's getting built somewhere else)
if (images.length) {
  // set inum
  var inum = images.length;
  var randnum = Math.random();
  var randIndex = Math.floor(randnum * inum);


  // Ensure you have an array item for every image you are using.
  var imageFile;
  if (randIndex < images.length) {
    imageFile = images[randIndex];
  }
...

</script>

In the body

<script type="text/javascript">
  window.onload = function() {
    if (imageFile) {
      var body = document.getElementsByTagName("body")[0];
      if (body) { body.setAttribute('style',"background:url('"+imageFile+"'); text: white;"); }
    } 
 }
</script>

-1 Have you tested this? `randnum=undefined`, `undefined*(inum-1)=NaN`, `Math.round(NaN)=NaN`, `NaN+1=NaN`, so `rand1 = NaN`. Hence `images[NaN]` is `undefined`... See the problem? Also.. your random-number logic is wrong, for example: If the array-length is 1.. then you do `random * (1-1) = 0` and after adding 1 you'll be requesting array[1] which should have been array[0].... — GitaarLAB, Nov 10 '13 at 08:38

GitaarLAB · Accepted Answer · 2013-11-10T07:42:18.293

0

Simple, change both scripts to:

<script type="text/javascript">
var images = [ 'http://tinyurl.com/qhhyb8k'
             , 'http://tinyurl.com/nqw2t9b'
             , 'http://tinyurl.com/nkogvoq'
       //    , 'url 4'
             ]
,    image = images[ (Math.random() * images.length)|0 ]
; //end vars

window.onload=function(){
    document.body.style.background=
        "url('"+image+"') no-repeat center center fixed";
    document.body.style.backgroundSize=
        "cover";  // width% height% | cover | contain 
};
</script>

Nothing more to configure, just add/remove/change urls.

Example fiddle here.

Hope this helps.

edited Nov 10 '13 at 07:42

answered Nov 10 '13 at 01:04

GitaarLAB

14,536
11
60
80

i set the number on purpose because i only added 1 image. i needed help setting image properties so the image stretches to the screen and is fixed. ive already tried the background image css styling.your script is much simpler than mine so i may switch to it – Nov 10 '13 at 04:53
Whoops, totally missed that. I've updated my answer accordingly. In my defense.. the dodgy javascript drew way more attention then your essentially simple question: 'how to center a background-image'. – GitaarLAB Nov 10 '13 at 07:59

Need to set styling rules to a JavaScript image randomizing script

2 Answers2