<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="banner"> <div id="cloud-scroll"></div> </div>

#banner { background-image: linear-gradient(120deg, #91C4FF 0%, #F0F7FF 87%); position: relative; width: 100%; height: 950px; } #cloud-scroll { background: url(https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1485547918/new-york-city-skyline-BIGCITY0117.jpg?itok=po0Op8ou) repeat-x; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; position: absolute; -webkit-animation: 900000s backgroundScroll infinite linear; -moz-animation: 900000s backgroundScroll infinite linear; -o-animation: 900000s backgroundScroll infinite linear; -ms-animation: 900000s backgroundScroll infinite linear; animation: 900000s backgroundScroll infinite linear; } @-webkit-keyframes backgroundScroll { from { background-position: 0 0; } to { background-position: -99999999px 0; } } @keyframes backgroundScroll { from { background-position: 0 0; } to { background-position: -99999999px 0; } }