Question

I have a function that is adding a background-image to my div. But its not showing.

this is my function

var totalCount = 6;
function changeBackground()
{
    var num = Math.ceil( Math.random() * totalCount );
    backgroundUrl = '/background/test2/'+num+'.jpg';

    $('#background').css('background-image, url('  +backgroundUrl+  ')');
}

changeBackground();

The image changes everytime that the the page gets refreshed. I know that part is working because if i change

$('#background').css('background-image, url('  +backgroundUrl+  ')');

to

document.body.parentNode.style.backgroundImage = 'url(background/test2/'+num+'.jpg)';

it shows me the image like i wanted. But on the html tag. I want it on the div, so i can fade it in with jQuery.

here is my CSS

#background {
width:100% !important;
height:100% !important;
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
    background-size: cover;
}

i don’t get any error’s in the console and when i look up the css nothing is added in the css. How can i now what is wrong? So in the future i can for myself what the problem is.

Answer 1

Change

$('#background').css('background-image, url('  +backgroundUrl+  ')');

To

$('#background').css('background-image', 'url('  +backgroundUrl+  ')');