December 1, 2025 in CSS, HTML

How to Animate a Background Image to Move Behind Text Using CSS?

Animating a background image behind text is a powerful visual effect that adds depth and motion to your typography. With modern CSS, you can achieve this using background clipping and keyframe animations—no JavaScript required.

In this guide, we’ll walk through how to animate a background image so it smoothly moves behind your text.

Why Animate Background Images Behind Text?

This effect is commonly used in:

• Hero sections
• Branding and creative pages
• Headings that need visual emphasis
• Text-based banners

It gives your content a dynamic, eye-catching look while keeping the text readable and sharp.

Step 1: Create the Keyframe Animation

We start by animating the background-position. The image will begin at the top, move to the bottom halfway through the animation, and then return to the top.

This creates a smooth loop:

@keyframes anim {
  0% {
    background-position: top;
  }
  50% {
    background-position: bottom;
  }
  100% {
    background-position: top;
  }
}

/* Vendor prefixes for older browsers */
@-webkit-keyframes anim { /* same keyframes */ }
@-moz-keyframes anim { /* same keyframes */ }
@-ms-keyframes anim { /* same keyframes */ }

Adding vendor prefixes ensures maximum compatibility across browsers, especially older versions of WebKit and Firefox.

Step 2: Style the Text and Apply the Animation

The animated background needs to sit inside the text. For that, we use background-clip: text combined with a transparent text fill.

Here’s the complete CSS for the <h1> element:

body {
  background: #000;
}

h1 {
  padding: 0 30px 30px;
  font-family: "Syne", sans-serif;
  font-size: 50px;
  font-weight: 700;
  line-height: 1.5;

  background: url(https://source.unsplash.com/pink-yellow-and-green-color-Mx688PpeE2A) no-repeat;
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;

  color: rgba(255, 255, 255, 0.2);
  animation: anim 7s ease-in infinite;

  text-rendering: optimizeLegibility;
  word-break: break-word;
}

Key points:

• background-size: cover ensures the image covers the text width.
• background-clip: text displays the image inside the text itself.
• color: transparent / low-opacity allows the image to show clearly.
• animation: anim 7s infinite creates a continuous movement effect.

Step 3: Add Your Text Content

<h1>
  We work as technical consultants for companies and individuals to develop products 
  that are secure, scalable, and compliant with global coding standards.
</h1>

You can replace this heading with any content you want to animate.

Live Demo

You can preview or fork the working example here:
CodePen: https://codepen.io/jasjain/pen/NWmeLMz

Tips for Customizing the Effect

• Use your own image: Replace the Unsplash URL with your preferred image path.
• Adjust the animation timing: Speed it up or slow it down by changing 7s.
• Modify background-size: Larger images create smoother motion.
• Experiment with directions: Animate background-position left/right for horizontal motion.

Summary

Animating a background image behind text is a simple yet visually striking technique. With just a few lines of CSS, you can create moving, textured typography suitable for hero banners, section headings, and modern web layouts.

By combining:

• background-clip: text
• background-position animation
• Vendor-prefixed keyframes

…you get a smooth, cross-browser animation that enhances your design without affecting performance.