Background Infinite Loop Animation

In this tutorial, you will learn to how to apply a pattern background with infinite loop animation using CSS. The pattern background is an image then animation is added to it. Watch the video below for a detailed tutorial.




body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url("") repeat 0 0;
  animation: animate-bg 0.92s infinite linear;

@keyframes  animate-bg {
  100% {
    background-position: 50px 50px;

h1 {
  color: gray;
  font-family: "Roboto", sans-serif;
  font-size: 8em;
  font-weight: 900;

Image Source