Infinitely-scrolling background demo

<template>
  <div class="container">
    <div class="homepage--hero">
      <div class="homepage--hero--background"></div>
    </div>
  </div>
</template>

<style lang="scss">
@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-2000px, 0, 0);
  }
}

.homepage {
  &--hero {
    position: relative;
    width: 100vw;
    height: 65vh;
    overflow-x: hidden !important;

    &--background {
      position: absolute;
      top: 0;
      z-index: -1;
      width: 6000px;
      height: 65vh;
      background: url('background.svg') repeat-x;
      background-position: center center;

      @media (prefers-reduced-motion: reduce) {
        animation: none;
      }

      @media (prefers-reduced-motion: no-preference) {
        animation: slide 45s linear infinite;
      }

    }
  }
}
</style>