<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="showcase"> <div class="showcase-container"> <div class="showcase-animation bg-animated-reverse loaded"> <div class="bg-animator"> </div> </div> </div> </div>

.showcase-animation { width: 100%; height: 80vh; margin: 40px 0; background-attachment: scroll; background-size: cover; background-image: url("https://preview.ibb.co/fhYn9c/htmllover_bg.png"); background-position: center center; } .showcase { background-size: cover; background-position: center center; position:relative; display:block; } .bg-animator { background-image: inherit; display:block; background-size: 0px 0px !important; overflow: hidden; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 0 !important; } .bg-animated-reverse .bg-animator:after { transform: translate3d(0, 0, 0); background-image: inherit; background-attachment: scroll; background-size: auto 100%; content: ''; position: absolute; left: 0; top: 0; width: 500%; min-width: 300vw; height: 100%; display: block; background-repeat: repeat; -webkit-animation: BackgroundAnimationReverse 300s linear infinite; -moz-animation: BackgroundAnimationReverse 300s linear infinite; -ms-animation: BackgroundAnimationReverse 300s linear infinite; } .bg-animated-vertical>* { position: relative; z-index: 2; }