Background images not shown in MVC

Question

Hello,

 

I placed the jquery script below in my layout.cshtml for it to display different background images but nothing happens. Please advise what am I missing. Thank you. Note: the paths of the images are correct.

 

    <script>

$(document).ready(function(){

var header = $('body');

var backgrounds = new Array(

    'url(~/Content/images/bgImage-1.jpg)'

  , 'url(~/Content/images/bgImage-2.jpg)'

  , 'url(~/Content/images/bgImage-3.jpg)'

  , 'url(~/Content/images/bgImage-4.jpg)'

  , 'url(~/Content/images/bgImage-5.jpg)'

);

var current = 0;

function nextBackground() {

    current++;

    current = current % backgrounds.length;

    header.css('background-image', backgrounds[current]);

}

setInterval(nextBackground, 1000);

header.css('background-image', backgrounds[0]);

});

    </script>