title: Background repeat image to animate in Tailwind
body: <p>I am trying to work with Tailwind CSS, where currently now I am trying to animate a background image. I tried different methods but have not yet figured out how to animate the background image in single direction from left to right.</p>
  <p>Here is what I have done so far.</p>
  <ul>
  <li>Added a custom background image</li>
  <li>Added a repeat so that it fills the area.</li>
  </ul>
  <p>What additionally I want to do, is show it like an animation, so it feels like it's moving. I had already implemented it in normal CSS but can't put it in Tailwind.</p>
  <p>Following is the video for the animation that has been achieved in normal CSS: <a href="https://youtu.be/Jx8fg2MdG3Y" rel="nofollow noreferrer">https://youtu.be/Jx8fg2MdG3Y</a></p>
  <p>Following is the Tailwind playground for the background I have implemented so far: <a href="https://play.tailwindcss.com/jmoPHTdXAe" rel="nofollow noreferrer">https://play.tailwindcss.com/jmoPHTdXAe</a></p>
  <p>Current implemented code in Tailwind.</p>
  <pre><code>&lt;div class=&quot;p-6 bg-gray-500 flex flex-col items-center min-h-screen justify-center bg-hero-pattern bg-repeat animate-ltr-linear-infinite&quot;&gt;
  &lt;div class=&quot;text-white&quot;&gt;
      &lt;h1 class=&quot;text-6xl&quot;&gt;Some Text HERE&lt;/h1&gt;
      &lt;h1 class=&quot;text-2xl&quot;&gt;Background Not Animating&lt;/h1&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The following is the configuration I have tried so far in Tailwind.</p>
  <pre><code>  theme: {
      extend:{
        backgroundImage: theme =&gt; ({
          'hero-pattern': &quot;url('img/bg.png')&quot;
        }),
        animation:{
          'ltr-linear-infinite': 'normal 100s linear infinite'
        }
      }
    }
  </code></pre>
  <p>Following is the image I am using for repeat:</p>
  <p><a href="https://i.ibb.co/Qn5BR8N/bg.png" rel="nofollow noreferrer">https://i.ibb.co/Qn5BR8N/bg.png</a></p>