How to Create a Sliding Background Effect Using CSS ? Last Updated : 08 Oct, 2024 Comments Improve Suggest changes Like Article Like Report A sliding background effect in CSS creates a smooth, continuous movement of a webpage’s background image, typically in a horizontal or vertical direction. It gives a dynamic, animated feel by using properties like background-position and animation, enhancing visual engagement without additional JavaScript.ApproachContainer Setup: The .wrapper class ensures content overflow is hidden, creating a viewport for the sliding background animation.Background Configuration: The .sliding-background class applies a repeating background image, with dimensions set to create the sliding effect.Animation Definition: The @keyframes slide defines the animation movement from the initial to final background positions along the x-axis.Animation Properties: The animation property applies a smooth, continuous movement lasting 60 seconds, using a linear timing function for constant speed.Infinite Loop: The infinite keyword in the animation property ensures the sliding background effect repeats endlessly without interruption. Example: In this example we are following above-explained approach. html <!DOCTYPE html> <html> <head> <title>Sliding Background</title> <style> .wrapper { overflow: hidden; } .sliding-background { background: url( "https://media.geeksforgeeks.org/wp-content/uploads/20241008160354095180/gfg-d.png") repeat-x; height: 961px; width: 6000px; animation: slide 60s linear infinite; } @keyframes slide { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-2000px, 0, 0); } } </style> </head> <body> <div class="wrapper"> <div class="sliding-background"></div> </div> </body> </html> Output:Sliding background Effect using CSS Example Output Comment More infoAdvertise with us Next Article How to Create a Sliding Background Effect Using CSS ? S Slash_IT Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to create a skewed background using CSS ? A skewed background design enhances a website's visual appeal with dynamic, angled elements. By using CSS transform: skew() along with ::before and ::after pseudo-elements, you can easily create a slanted effect, adding a modern and engaging look to your site's layout.ApproachHTML Structure - Sectio 2 min read How to create linear gradient background using CSS ? In CSS, we can use the background-color property to set the background color of an element to a specific color. Sometimes we want to add more styling to the element when setting the background color by using the linear-gradient property. CSS linear-gradient property lets you display smooth transitio 4 min read How to create Skewed Background with hover effect using HTML and CSS? The skewed background or you can say an angel color shade background can be created by using HTML and CSS. This background can be used as a cover pic of your website that will be attractive. In this article, we will create a simple skewed background. We will divide the article into two sections in t 2 min read How to Create Wave Background using CSS? A wave background is a design element having wavy patterns or shapes used to add movement in the web pages. The :before pseudo-element can be used to create a wavy background by applying it to an element and using CSS properties like clip-path to create wave shapes.Using :before pseudo-elementTo cre 2 min read How to create a smooth scrolling effect using CSS ? Smooth scrolling is employed on web pages to enhance the user experience by providing a visually appealing and seamless transition between different sections of the page. It improves readability and enhances navigation. Using the CSS property scroll-behaviour we can achieve the smooth scrolling effe 2 min read Like