<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 ----------> <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 class="wasteland"></div> <div class="glass"></div>

body { margin:0; } .wasteland { animation:zoomIn 10s linear infinite alternate; background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/71829/wasteland.jpg); background-size:cover; height:100vh; position:fixed; width:100vw; } .glass { animation:zoomIn 10s linear infinite alternate-reverse; background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/71829/5791996587_7b192ffbf7_o.jpg); background-size:cover; height:100vh; opacity:.3; position:fixed; width:100vw; } @keyframes zoomIn { 0% { transform:scale(1); } 100% { transform:scale(1.5); } }