html, body { margin: 0; padding: 0; height: 100%; overflow-x: hidden; /* prevent horizontal scrollbar from animation */ } /* Background container stays fixed behind everything */ .background-sky { position: fixed; top: 0; left: 0; width: 200%; /* double width for seamless scrolling */ height: 100%; z-index: -1; /* behind all content */ pointer-events: none; /* so it doesn’t block clicks */ } body { background-color: black; } /* Sunset layer */ .sunset { position: absolute; top: 0; left: 0; width: 200%; height: 100%; background-image: url('../images/bg/sunset.png'); /* replace with your sunset photo */ background-repeat: repeat-x; animation: scrollSunset 210s linear infinite; } /* Clouds layer */ .clouds { position: absolute; top: 0; left: 0; width: 200%; height: 100%; background-image: url('../images/bg/clouds.png'); /* replace with transparent cloud PNG */ background-repeat: repeat-x; opacity: 0.7; animation: scrollClouds 170s linear infinite; } @keyframes scrollSunset { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes scrollClouds { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Example content to show it doesn’t move */ .content { position: relative; z-index: 1; color: white; padding: 50px; font-family: sans-serif; }

Hello, World!

This content stays above the scrolling sunset and clouds.