<script src="../_layouts/15/Scripts/jquery-3.3.1.min.js" type="text/javascript"></script>

<script src="../_layouts/15/Scripts/SP.js" type="text/javascript"></script>

<script src="../_layouts/15/Scripts/SP.Runtime.js" type="text/javascript"></script>

<script>

    $(document).ready(function () {

        var x = 0;

        var y = 0; var banner = $("#banner");

        banner.css('backgroundPosition', x + 'px' + '' + y + 'px');

        window.setInterval(function () {

            banner.css('backgroundPosition', x + 'px' + '' + y + 'px');

            y--;

        }, 90);

    });

   </script>

 AND THIS IS MY CODE CSS

<style type="text/css">

div#banner

{

    width:960px;

    height:200px;

    margin:auto;

    background-image:url("C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\IMAGES\ImagesVoituresJPG\New folder\3.jpg");

    background-repeat:no-repeat;

}

div#banner p {

    color:white;

    font-size:43px;

    font-style:oblique;

    position:relative;

    left:20px;

    top:120px;

    width:305px;

    padding:20px;

    background-color:black;

    text-align:center;

    text-transform:uppercase;

    letter-spacing:20px;

    opacity:2;

}

</style>

THIS IS MY FORM

<div id="banner"><p> welcome </p></div>