how to change background dynamically of a page in mvc5

<script type="text/javascript">

    $(window).load(function () {
    
        var i = 0;
    
        var images = ['@Url.Content("~/Content/images/i8.jpg")',
                '@Url.Content("~/Content/images/gh.jpg")',
                '@Url.Content("~/Content/images/hj.jpg")',
                '@Url.Content("~/Content/images/11.jpg")'];
       
        var image = $('#slideit');
   
        //Initial Background image setup
     
        image.css('background-image', '~/Content/images/i8.jpg');

        //Change image at regular intervals

        setInterval(function () {
     
            image.fadeOut(1000, function () {
            
                image.css('background-image', 'url(' + images[i++] + ')');
            
                image.fadeIn(1000);
             
            });

            if (i == images.length)
    
            i = 0;
           
        }, 8000);
   
    });
   
</script></script>