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.


HTML

<body>
  <h1>LOREM</h1>
</body>

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url("https://www.toptal.com/designers/subtlepatterns/uploads/what-the-hex.png") 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

https://www.freepik.com/free-vector/colorful-galaxy-watercolor-doodle-pastel-background_13312347.htm#query=planets&position=20&from_view=search&track=sph