How to change background images on scroll with CSS?
Following is the code to change background images when scrolling using CSS −
Example
Live Demo
<!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 −
Published on 06-Apr-2020 16:46:10
