Animated backgrounds are always more beautiful for website users. We also have a moving background in this code. This background shows a road in the dark where it is raining. It is raining on this road with animation. This background can be used for writing websites or websites that are about film.


HTML
<!-- This script got from www.devanswer.com  -->
<section>
</section><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com ">Developers Answer</a></div>
                        

CSS
*{
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
}
section{
   position: relative;
   height: 100vh;
   width: 100%;
   background-image: url('http://www.devanswer.com/img/road-dark.jpg');
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
}
section::before{
   content: '';
   position: absolute;
   top: 0%;
   left: 0%;
   width: 100%;
   height: 100%;
   background-image: url('http://www.devanswer.com/img/rain_png.png');
   animation: rain 0.19s ease-in infinite;
}
@keyframes rain{
   0%{
      background-position: 10 0;
   }
   100%{
      background-position: 20% 80%;
   }
}