<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 class="box"> <div class="sun"></div> <div class="cloud"></div> </div>

body{ margin: 0; padding: 0; } .box{ position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-size: cover; background-color: #000; background-image: linear-gradient(180deg, #000 6%, #000 32%, #000 53%, #f5f5f5 66%, #ccc 93%); } .sun{ position: absolute; width: 50px; height: 50px; left: 45%; top: 25%; background: #f9f499; opacity: 0.8; border-radius: 50%; border: 4px solid #fbf7b2; } .cloud{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(https://i.postimg.cc/VNHjr6jr/clouds.png); animation: animate-clouds 90s linear infinite; } @keyframes animate-clouds{ 0%{ background-position: 0px; } 100%{ background-position: 5000px; } }