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>
<h1>LOREM</h1>
</body>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;
}