Background image change

This site is best viewed in a modern browser with JavaScript enabled.

deepthings

Hi there,

I'm trying to change the background image of a page (with setInterval eventually, but this is just a button to test it for now). The background image is appearing fine, and the alternate image is nice.

<body style="background-image:url('img/backg.jpg'); background-size: 100%; background-repeat:no-repeat; background-color: #8ba49e;" onload="backg();">

then this later on in the body:

<input type="button" value="button" onclick="document.body.style.backgroundImage = 'img/backg1.jpg';">

It's not working. I've also had referred to the background image in onclick as [ICODE]document.body.background[/ICODE] and [ICODE]document.body.backgroundImage[/ICODE].

What's gone wrong?

Thanks for your help,
Matt

xelawho

did you try:

<input type="button" value="button" onclick="document.body.style.backgroundImage = 'url(img/backg1.jpg)';">

joezimjs

Exactly, you need to use the same syntax as the CSS, in other words surround the value with url().

In an unrelated note, for terseness and to create smaller file downloads, the CSS for your body' background should be combined into the shorthand property: background. Like this:

background:#8ba49e 0 0 100% no-repeat url('img/backg.jpg');

You can view more about this shorthand property at WC3

deepthings

I should have seen that. Thanks so much!

I have been using that to check that I was able to change the background regularly as a sort of animation using this where backg() is fired on body load:

<script type="text/javascript">
function backg() {
	setInterval(tail(), 2000);
}

function tail() {
	document.body.style.backgroundImage = 'url(img/backg.jpg)';
	setTimeout("document.body.style.backgroundImage = 'url(img/backg1.jpg)';", 1000);
}
</script>

As it stands, this has the effect of changing the background once, but then it stops. It's as if tail is called once, but not repeated. In fact, I'm pretty sure that's happening because I reversed the image references (i.e. backg1 being set first and then backg being set), which works.

Any thoughts on this?
Thanks again

deepthings

It seems that I needed to change the interval call to just tail not tail() for some reason.

Thanks anyway

xelawho

I'm thinking error console:
"useless setInterval call (missing quotes around argument?)"

so either (good):

setInterval(tail, 2000);

or (not so good, but still works):

setInterval("tail()", 2000);

but really I think you can simplify - put your image paths in an array, set the interval on body load and let the code do the rest, this way you can add as many images as you like to the loop, just by adding their paths to the array:

<body onload="setInterval(tail, 2000)">
<script type="text/javascript">

bgs=['url(img/backg.jpg)','url(img/backg1.jpg)']

count=0;
function tail() {
	document.body.style.backgroundImage = bgs[count++%bgs.length];
}
</script>
</body>