In this Elementor tutorial I will show you how to animate seamless background images. I will pull this off with just a few lines of CSS and will walk you through the code as we go.
Timestamps:
- 0:00 Introduction
- 0:14 Download Seamless Background Image
- 1:23 Offset Tool in Photoshop
- 2:36 Elementor Tutorial Begins
- 3:42 CSS Code – Horizontal Animation
- 8:02 CSS Code – Vertical Animation
- 11:08 CSS Code – Responsive Breakpoints
Left to Right Animation CSS:
.bgloop {
animation: looping 10s infinite linear;
background-size: 100vw auto;
}
@keyframes looping {
to {background-position: 100vw 0}
}
Top to Bottom Animation CSS:
.bgloop {
animation: looping 10s infinite linear;
background-size: auto 100vh;
}
@keyframes looping {
to {background-position: 0 100vh}
}
Responsive Breakpoints CSS:
body[data-elementor-device-mode="tablet"] .bgloop { }
body[data-elementor-device-mode="mobile"] .bgloop { }
Image Credits:
https://pixabay.com/
https://www.freepik.com/
