"background"
Bootstrap 3.0.0 Snippet by SamiulHaqueKhan007

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="picture"></div> <h1>Misty Background <br> Experiment</h1> <div id="layer2"></div> <div id="layer1"></div>
@import url(https://fonts.googleapis.com/css?family=Roboto:700); body { font-family: 'Roboto'; text-align: center; } body h1 { font-size: 50px; margin-top: 200px; } body div { background-size: 200%; background-position: 0 50%; height: 100%; position: fixed; top: 0; width: 100%; pointer-events: none; } body #picture { background-image: url("http://finda.photo/image/10216/thumbnail/original"); background-size: cover; background-repeat: no-repeat; z-index: -1; } body #layer1 { background: repeating-linear-gradient(90deg, rgba(236, 240, 241, 0), rgba(236, 240, 241, 0.6), rgba(236, 240, 241, 0)); animation: layer1 10s linear infinite alternate; } body #layer2 { background: repeating-linear-gradient(90deg, rgba(236, 240, 241, 0), rgba(236, 240, 241, 0.6), rgba(236, 240, 241, 0)); animation: layer2 15s linear infinite alternate; } @keyframes layer1 { 0% { background-position: 1000px 0; } 50% { background-position: 500px 0; } 100% { background-position: 0 0; } } @keyframes layer2 { 0% { background-position: 0 0%; } 50% { background-position: 500px 0%; } 100% { background-position: 1000px 0; } }

Related: See More


Questions / Comments: