Setting a background image with external js file

Question

Im having an issue with setting my bacground image by using an external js code. this is the code of the js:

$(document).ready()
{
mazdaArr = new Array();
    for (i=1;i<6;i++)
    {
        mazdaArr[i-1]= new Image();
        mazdaArr[i-1].src = 'mazda/mazda'+[i]+'.jpg';
    }   
    $('mainContent').css('background-image','url(/mazda/mazda4.jpg)');
    $('mainContent').css('background-image', 'url(' + mazdaArr[3].src + ')');
    console.log(mazdaArr[3].src);
}

everything works fine but the css attr, since I can see at the console the right link and when I click it, the image will open up in new tag. by that i guess the jquery call from html page is fine.

cant find what goes wrong here...

Answer 1

A few things:

• Looks like your string is concatinating an array literal, and not the integer i. So 'string'+[]+'string' is effectively 'string' + new Array() + 'string' .
• Your selector for mainContent needs to either be looking for a class or an ID so either .mainContent or #mainContent .
• Finally, you don't need to instantiate a new Image since jQuery will just update the CSS of the element with a new string for the background-image property.

Try

$(document).ready(function() {
    var mazdaArr = [],
        i = 0;
    for (i; i<5; i++) {
        mazdaArr[i] = 'mazda/mazda'+ i +'.jpg';
    }   

    $('#mainContent').css('background-image', 'url(' + mazdaArr[3] + ')');

    console.log(mazdaArr[3].src);
});