<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 class="container animated-bg background-position animated-img"> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> </div> </div> </div> <a href="https://www.gradient-animator.com/">You Can Also Get Background Animation Here</a>

.animated-bg { align-items: center; background: rgba(0, 0, 0, 0) url("http://lorempixel.com/600/300") no-repeat scroll center center; display: flex; height: 300px; position: relative; z-index: 2; } /*If Included it in class name image can animated verticle.*/ /*.background-position { background-position: center center; background-size: cover; z-index: 2; }*/ .animated-colors { animation: 15s ease 0s normal none infinite running animated-colors; background: rgba(0, 0, 0, 0) linear-gradient(0deg, #3498db, #2196f3, #3f51b5, #2196f3, #00bcd4, #009688) repeat scroll 0 0 / 350% 350%; } @keyframes animated-colors { 0% { background-position: 0 90%; } 50% { background-position: 100% 11%; } 100% { background-position: 0 90%; } } @keyframes animated-colors { 0% { background-position: 0 90%; } 50% { background-position: 100% 11%; } 100% { background-position: 0 90%; } } .animated-img { animation: 10s ease 0s normal none infinite running animated-image; } @keyframes animated-image { 0% { background-position: 0 50%; } 50% { background-position: 100% 20%; } 100% { background-position: 0 50%; } } @keyframes animated-image { 0% { background-position: 0 50%; } 50% { background-position: 100% 20%; } 100% { background-position: 0 50%; } }