Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • CSS Tutorial
  • CSS Exercises
  • CSS Interview Questions
  • CSS Selectors
  • CSS Properties
  • CSS Functions
  • CSS Examples
  • CSS Cheat Sheet
  • CSS Templates
  • CSS Frameworks
  • Bootstrap
  • Tailwind
  • CSS Formatter
Open In App
Next Article:
How to create Skewed Background with hover effect using HTML and CSS?
Next article icon

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.

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



Next Article
How to create Skewed Background with hover effect using HTML and CSS?

S
Slash_IT
Improve
Article Tags :
  • CSS
  • Web Technologies
  • 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 - Secti
    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 a Spotlight Effect using HTML and CSS ?
    In this article, we are going to create a spotlight effect over the image when we hover over it. This is mainly based on HTML, CSS and JavaScript. The below steps have to be followed to create this effect. HTML Section: In this section, we will create a container elements for the background image an
    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 Circle Loading Animation Effect using CSS ?
    In this article, we will see how to create a circle-loading animation using HTML and CSS, along with understanding its basic implementation through the example. Generally, Loading Animation is utilized to wait for the content to be fully loaded on the webpage. If some pages don't contain the loader,
    6 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 cr
    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
  • 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
    2 min read
  • 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
    3 min read
  • 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
    4 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences