

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to change background images on scroll with CSS?
Following is the code to change background images when scrolling using CSS −
Example
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1> <style> body, html { height: 100%; margin: 0; font-family: Arial, Helvetica, sans-serif; } * { box-sizing: border-box; } div { height: 40%; background-position: center; background-repeat: no-repeat; background-size: cover; } .image1 { background-image: url("https://i.picsum.photos/id/827/400/400.jpg"); } .image2 { background-image: url("https://i.picsum.photos/id/817/400/400.jpg"); } .image3 { background-image: url("https://i.picsum.photos/id/811/400/400.jpg"); } .image4 { background-image: url("https://i.picsum.photos/id/871/400/400.jpg"); } .image5 { background-image: url("https://i.picsum.photos/id/471/400/400.jpg"); } .image6 { background-image: url("https://i.picsum.photos/id/271/400/400.jpg"); } h1{ position:fixed; top:10%; left: 40%; background-color: rgba(0, 0, 0, 0.527); padding: 40px; color: white; } </style> </head> <body> <div class="image1"></div> <div class="image2"></div> <div class="image3"></div> <div class="image4"></div> <div class="image5"></div> <div class="image6"></div> <h1>Fixed Text</h1> </body> </body> </html>
Output
The above code will produce the following output −
- Related Questions & Answers
- How to create a gradient background color on scroll with CSS?
- Specify position of the background images with CSS
- Specify the size of the background images with CSS
- How to shrink a header on scroll with CSS and JavaScript?
- How to Create an On Scroll Fixed Navigation Bar with CSS?
- How to style images with CSS?
- How to resize a navigation bar on scroll with CSS and JavaScript?
- HTML Tables with Fixed Header on Scroll in CSS
- Change the background color of a button with CSS
- Disabling Scroll Anchoring with CSS
- How to slide down a navigation bar on scroll with CSS and JavaScript?
- How to hide a navigation menu on scroll down with CSS and JavaScript?
- How to create a fixed/sticky header on scroll with CSS and JavaScript?
- Perform Animation on background-position property with CSS
- How to change tabs on hover with CSS and JavaScript?
Advertisements