How to Change Background Images on Scroll with CSS.
Step 1) Add HTML:
<div class="bg-image img1"></div> <div class="bg-image img2"></div> <div class="bg-image img3"></div> <div class="bg-image img4"></div> <div class="bg-image img5"></div> <div class="bg-image img6"></div> <div class="bg-text">DEMO</div>
Step 2) Add CSS:
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.bg-image {
/* Full height */
height: 50%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Images used */
.img1 { background-image: url("https://adaptabiz.com/wp-content/uploads/2020/09/mobile-min.jpg"); }
.img2 { background-image: url("https://adaptabiz.com/wp-content/uploads/2020/09/google-cardboard-min.jpg"); }
.img3 { background-image: url("https://adaptabiz.com/wp-content/uploads/2020/09/Webp.net-compress-image2.jpg"); }
.img4 { background-image: url("https://adaptabiz.com/wp-content/uploads/2020/09/Webp.net-compress-image2.jpg"); }
.img5 { background-image: url("https://adaptabiz.com/wp-content/uploads/2019/04/banner-background.jpg"); }
.img6 { background-image: url("https://adaptabiz.com/wp-content/uploads/2019/04/Screen-Shot-2019-04-03-at-3.49.45-PM.jpg"); }
/* Position text in the middle of the page/image */
.bg-text {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
font-size: 80px;
border: 10px solid #f1f1f1;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 300px;
padding: 20px;
text-align: center;
}Full Code and Output :
How to Change Background Images on Scroll with CSS.
You may Also Like
How to add Typing Effect / Type Writer Effect to your text Using JavaScript
By Richard
/ June 5, 2022
How to add Typing Effect / Type Writer Effect to your text Using JavaScript Step 1) Add HTML: <h1>Typewriter</h1>...
Read More
How to Create a full screen video background using HTML, CSS
By Richard
/ May 22, 2022
Learn How to Create a full screen video background using HTML, CSS Adding HTML <div class="videobg"> <video src="https://adaptabiz.com/wp-content/uploads/2021/05/Pexels-Videos-1234162.mp4" loop muted...
Read More
How to Create an Off-Canvas Menu / Side Bar Navigation
By Richard
/ April 29, 2022
How to Create an Off-Canvas Menu / Side Bar Navigation Step 1) Add HTML: <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn"...
Read More
How To Create a Coming Soon Page / Maintenance Page Using HTML, CSS and JavaScript
By Richard
/ April 19, 2022
How To Create a Coming Soon Page / Maintenance Page Using HTML, CSS and JavaScript Step 1 : Adding...
Read More
How to Create Weight Converter using HTML and JavaScript
By Richard
/ April 2, 2022
How to Create Weight Converter using HTML and JavaScript For Converting Pounds to Kilogram Adding HTML : <h2>Weight Converter Pound...
Read More
How to create a Scroll indicator with CSS and JavaScript
By Richard
/ February 19, 2022
How to create a Scroll indicator with CSS and JavaScript Step 1) Add HTML: <div class="header"> <h2>Scroll Indicator</h2> <div...
Read More
How to Convert Color image to Black & White using CSS Filter ( Color to Grayscale)
By Richard
/ February 15, 2022
Many a times, there is necessity of converting Color image into Black and White or Grayscale. Here in this very...
Read More
How to Create a JavaScript Countdown Timer
By Richard
/ February 4, 2022
There are many a times, when you’re going to need a countdown clock for your project. You may have an...
Read More
How to Create an Avatar image with CSS
By Richard
/ January 20, 2022
How to Create an Avatar image with CSS Step 1) Add HTML: <h2>How to create Avatar Images with CSS</h2> <img...
Read More
How to Change Background Images on Scroll with CSS.
By Richard
/ January 13, 2022
How to Change Background Images on Scroll with CSS. Step 1) Add HTML: <div class="bg-image img1"></div> <div class="bg-image img2"></div>...
Read More