load random image from array to a css background

Question

I am a js newbie. I Have looked for answers to this particular issue but have not found an answer yet in this forum or others, so sorry if it's here and I missed it. I have a script that works for loading a random image from an array to an id element placed directly in the html when the page loads.

I'm trying to see if I can get it to do the same thing but do it for a background image in a id element in a css file. I have firebug and it doesn't give me any error messages with this but it doesn't work either.

window. onload = choosePic;

var myPix = new
Array("images/image1.gif", "images/image2.gif");

function choosePic() {
    randomNum = Math.floor((Math.random() * myPix.length));
    document.getElementById("headerAnimation").style.backgroundImage.src = myPix[randomNum];
}

remove the .src, as in, it should just be .style.backgroundImage = "url('http://image.com/example.png')" — Esailija
– Esailija, Commented Aug 12, 2012 at 17:11

Anthony Mills · Accepted Answer · 2012-08-12 17:11:26Z

3

You have it almost right.

window.onload = choosePic;

var myPix = new Array("images/image1.gif", "images/image2.gif");

function choosePic() {
    var randomNum = Math.floor((Math.random() * myPix.length));
    document.getElementById("headerAnimation").style.backgroundImage =
        "url(" + myPix[randomNum] + ")";
}

answered Aug 12, 2012 at 17:11

Anthony Mills

8,7764 gold badges36 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1593237 Over a year ago

Hey this works! Thank you So Much! So the backgroundImage is equal to "url(with some parameters)". I think one of the problems with the way I looked at it was I wanted to change the css property but javascript is really overriding the property. Thank you again.

Anthony Mills Over a year ago

Well, also you were looking at it as being more granular than it is. There is a style.background and a style.backgroundImage because there are CSS properties background and background-image. But you were trying to access style.backgroundImage.src which doesn't exist (there's no background-image.src property in CSS. :) ) Remember what you're setting is a CSS property, no more, no less. Which means you need to remember url() or px or whatever would go in the CSS if you were writing a .css file.

user1593237 Over a year ago

Excellent! I will try playing around with that some more. Hopefully it will become clearer with practice. Thanks again!

Collectives™ on Stack Overflow

load random image from array to a css background

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related