JavaScript Arithmetic Operators

How to Create a Sliding Background Effect Using CSS ?

Last Updated : 08 Oct, 2024

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.

Approach

Container 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:

SlA

Sliding background Effect using CSS Example Output

JavaScript Arithmetic Operators

S

Slash_IT

Improve

Article Tags :

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 - Secti

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

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

How to Create Animated Background using CSS3 ?

Pre-requisite: Basic html Learn HTMLcss Learn cssYou will need to have a basic knowledge of Keyframes with css Learn Keyframes In this article, we are creating the background animation using CSS. The login form is used as a demo and the main intention to design background animation. HTML code: In th

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

How to create Incoming Call Animation Effect using CSS ?

In this article, we will learn how to create an incoming call animation effect, by using CSS. Approach: To create this effect, we essentially need to animate the shadow effects around the element frame, which can be easily manipulated using the CSS box-shadow property. It is described by X and Y off

How to create Shooting Star Animation Effect using CSS ?

The Shooting Star effect is one of the coolest background effects that is used for dark-themed websites. Shooting Stars Animation is an extraordinary illustration of a loading screen that grabs your eye for a considerable length of time for the remainder of the content to load on the website. This e

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 cr

How to create texture background using CSS ?

Introduction: We can use CSS property to texture the background of the web page by using an image editor to cut out a portion of the background. Apply CSS background-repeat property to make the small image fill the area where it is used. CSS provides many styling properties of the background includi

How to Create Custom Banner Background Using CSS ?

A Custom Banner Background in CSS refers to a specifically designed or styled background for a webpage banner, often using unique images, colors, gradients, or patterns. It enhances visual appeal and branding by adjusting properties like background-size, and background-position for a tailored look.