Chaning background image of an element onload (NOT BODY)

[Ginger monkey]

Hi,

Grateful for anyone's help, I'm a novice at js and have copied this script from a website.

I've changed the element targeted from body to target the div #hero and I'm able to set the bg color with the same script but not the bg image. I'm also able to change the bg image of the body with it but not this div. The paths are correct (relative to javascript and html file) so I'm at a complete loss.

Here is the relevant code:

function runBGSlideShow(){
if (!document.getElementById) return false;
var slideshow = document.getElementById("hero");
slideshow.style.background = ../images/home_content_hero3.jpg';
}

I've seen loads of examples saying this is how you do it so I must be doing something wrong.

TIA

[Dabrowski]

Is this a direct copy? There's a quote mark missing:

slideshow.style.background = '../images/home_content_hero3.jpg';

[Ginger monkey]

it doesn't work with the quote mark there either. i must have deleted it while posting it.

this works:

function runBGSlideShow(){
if (!document.getElementById) return false;
var slideshow = document.getElementById("hero");
slideshow.style.background = 'red';
}

but this doesn't;

function runBGSlideShow(){
if (!document.getElementById) return false;
var slideshow = document.getElementById("hero");
slideshow.style.background = '../images/home_content_hero3.jpg';
}

So logically it could be the image paths but these are correct unless they're not relative to the javascript doc...? I've just tried putting the image in the same location as the script and that won't work either. Completely stuck now..

[mehh]

try:
function runBGSlideShow(){
if (!document.getElementById) return false;
var slideshow = document.getElementById("hero");
slideshow.style.background = 'url(../images/home_content_hero3.jpg)';
}
or
function runBGSlideShow(){
if (!document.getElementById) return false;
var slideshow = document.getElementById("hero");
slideshow.style.backgroundImage = '../images/home_content_hero3.jpg';
}

[Ginger monkey]

I've solved it now! It needed url() around the image paths. When it's used on document.body it didn't need it.

Thanks for your help anyway.

:)

[Dabrowski]

Aah yes of course. Mehh that was going to be my next suggestion!

Glad you got it sorted.