← Back to gallery
CSS

Moving Background Reveal

A procedural moving background reveal where background-size and background-position travel are matched so the loop stays stable.

Duration
9s
Resolution
1440×900
Format
CSS
moving-backgroundbackground-positionbackground-sizeloopstatic-fallback

Background-position / Reveal Loop

Moving Background Reveal

A wider procedural background reveals through a fixed viewport with matching background-size and travel distance.

route strip moving background - 7.5s cycle · 1.00 intensity
Route

Wide scene reveal

Route Strip

A stripe field moves behind a stationary frame to reveal more of the background.

Background size and position travel use matching repeat distances.

  • background-position
  • loop
  • repeat-pattern
Grid

Subtle repeat

Grid Drift

A repeating grid drifts just enough to show depth without stealing focus.

The loop ends at the same tile boundary where it starts.

  • background-size
  • drift
  • decorative
Banner

Low-speed pan

Banner Pan

A banner-like pan uses a longer cycle to avoid feeling like a spinner.

The viewport remains fixed; only background-position changes.

  • pan
  • static fallback
  • background

Background inspector

Route Strip

Route
Motion contract
Background size and position travel use matching repeat distances.
Accessibility
Reduced motion holds a static representative background position.

When the background carries meaning, promote it to real content instead of CSS decoration.

css
.moving-bg {
  background-size: 220% 100%;
  animation: movingBg 7.50s linear infinite;
}

@keyframes movingBg {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .moving-bg { animation: none; background-position: 54% 50%; }
}