To create a seamless, slowly moving background that loops infinitely to the right (or left, please adjust your @keyframes) along the horizontal axis, you can use the following clean and efficient CSS setup.
*Use code with caution.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, nofollow, noarchive" />
<title>Sakarit - Moving Background</title>
<style>
body, html {
margin: 0;
padding: 0;
}
.animated-bg {
/* Step 1: Supply your seamless image */
background-image: url('your-seamless-image.png');
/* Step 2: Set it to only repeat horizontally */
background-repeat: repeat-x;
/* Step 3: Attach the custom infinite loop animation */
/* Adjust '40s' (40 seconds) higher for a slower movement, lower for faster */
animation: scrollRight 40s linear infinite;
}
/* Step 4: Define the keyframes for smooth scrolling */
@keyframes scrollRight {
from {
background-position: 0 0;
}
to {
/* Positive percentage moves the background graphic to the right */
background-position: 100% 0;
}
}
</style>
</head>
<body>
<div class="animated-bg"></div>
</body>
</html>A background image is cropped or cut off
When a background image appears cropped or cut off during a CSS animation, it usually happens because the browser doesn't know how to scale the image relative to the container, or the image's natural dimensions don't match the element's size.
Here is the updated CSS to fix the cropping issue while maintaining the seamless, slow horizontal scroll.
<style>
.animated-bg {
/* 1. Ensure the background image covers the area properly */
background-image: url('your-seamless-image.png');
background-repeat: repeat-x;
/* 2. Control the image scaling to prevent cropping */
/* 'contain' ensures the full height fits; adjust if you need a specific height */
background-size: auto 100%;
background-position: 0 0;
/* 3. The smooth, slow animation loop */
animation: scrollRight 40s linear infinite;
}
@keyframes scrollRight {
from {
/* Starts at the origin */
background-position: 0 0;
}
to {
/* Using a fixed pixel value instead of percentages often fixes
glitches or cropping issues when an image repeats.
Change '1000px' to match the actual width of your raw image asset. */
background-position: 1000px 0;
}
}
</style>A repeating background animation isn't smooth
When a background image appears cropped or cut off during a CSS animation, it usually happens because the browser doesn't know how to scale the image relative to the container, or the image's natural dimensions don't match the element's size.
Here is the updated CSS to fix the cropping issue while maintaining the seamless, slow horizontal scroll.
<style>
.animated-bg {
/* 1. Ensure the background image covers the area properly */
background-image: url('your-seamless-image.png');
background-repeat: repeat-x;
/* 2. Control the image scaling to prevent cropping */
/* 'contain' ensures the full height fits; adjust if you need a specific height */
background-size: auto 100%;
background-position: 0 0;
/* 3. The smooth, slow animation loop */
animation: scrollRight 40s linear infinite;
}
@keyframes scrollRight {
from {
/* Starts at the origin */
background-position: 0 0;
}
to {
/* Using a fixed pixel value instead of percentages often fixes
glitches or cropping issues when an image repeats.
Change '1000px' to match the actual width of your raw image asset. */
background-position: 1000px 0;
}
}
</style>A container has a fixed height
Option1: The CSS Math Fix
If you know the original dimensions of your image file, you can let CSS calculate the perfect loop point automatically using calc(). This ensures a seamless reset even if you change sizes later.
Replace ORIGINAL_WIDTH and ORIGINAL_HEIGHT in the code below with the actual pixel numbers of your raw image file:
<style>
.animated-bg {
width: 100vw;
height: 900px;
background-image: url('your-seamless-image.png');
background-repeat: repeat-x;
/* 1. Scale the image to fit your 900px height perfectly */
background-size: auto 900px;
background-position: 0 0;
/* 2. Math: (Original Width / Original Height) * Current Height (900)
Example: If image is 1920x1080, change to: calc((1920 / 1080) * 900px) */
--scaled-width: calc((ORIGINAL_WIDTH / ORIGINAL_HEIGHT) * 900px);
/* 3. Smooth, slow linear animation */
animation: scrollRight 40s linear infinite;
}
@keyframes scrollRight {
from {
background-position: 0 0;
}
to {
/* Moves exactly one scaled image width so the reset is invisible */
background-position: var(--scaled-width) 0;
}
}
</style>Option 2: The Exact Pixel Fix
If you know the original dimensions of your image file, you can let CSS calculate the perfect loop point automatically using calc(). This ensures a seamless reset even if you change sizes later.
Replace ORIGINAL_WIDTH and ORIGINAL_HEIGHT in the code below with the actual pixel numbers of your raw image file:
<style>
.animated-bg {
width: 100vw;
height: 900px;
background-image: url('your-seamless-image.png');
background-repeat: repeat-x;
background-size: auto 900px;
background-position: 0 0;
animation: scrollRight 40s linear infinite;
}
@keyframes scrollRight {
from {
background-position: 0 0;
}
to {
/* Replace 1600px with your calculated result */
background-position: 1600px 0;
}
}
</style>