How to Change the Background Image on Scroll Using CSS
CSS has significant power to create fantastic effects without putting any JavaScript in your code. One of the effects is keeping the background fixed as the foreground moves on scrolling.
How can we change the background image on scroll? It's much simpler than you think!
Let’s create a code and see the result.
Create HTML
- Create seven <div> tags with the following classes:
<div class="image one"></div>
<div class="image two"></div>
<div class="image three"></div>
<div class="image four"></div>
<div class="image five"></div>
<div class="image six"></div>
<div class="image seven"></div>
<div class="content">W3DOCS</div>Add CSS
- Set the height of the body to 100% and the margin to 0.
- Specify the font family names with the font-family property.
- Center the images with the background-position property.
- Set the background-repeat property to "no-repeat" so as the images won't be repeated.
- Set the background-size to "cover" to scale the images as large as possible to cover all the background area.
- Add links of the images with the background-image property.
- Style the content giving it a border and setting the width and height of it.
- Set the position to "fixed" so as it will be fixed while scrolling.
- Style the text with the color, font-weight and font-size properties.
- Use the "translate" value of the transform property, where the first value will move the element to the left (negative values to the left). The second value will move it up (negative values up).
- Center the content with the help of the text-align property.
- Give padding to create space on all sides of an element’s content.
- Add the z-index which specifies its order inside a stacking context.
- Specify the left and top margin edges with the left and the top properties.
- Give a background color to the content with the background-color property. We use the RGB value.
body,
html {
height: 100%;
margin: 0;
font-family: Helvetica, sans-serif;
}
.image {
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.one {
background-image: url("https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80")
}
.content {
background-color: rgb(0, 0, 0, 0.5);
color: #fff0c2;
font-weight: bold;
font-size: 60px;
border: 8px solid #000000;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 270px;
padding: 50px;
text-align: center;
}So, here is the final result of our code!
Example of changing the background image with a fixed box of text on scroll:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body,
html {
height: 100%;
margin: 0;
font-family: Helvetica, sans-serif;
}
.image {
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.one {
background-image: url("https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80")
}
.two {
background-image: url("https://images.unsplash.com/photo-1501504905252-473c47e087f8?ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80")
}
.three {
background-image: url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1063&q=80")
}
.four {
background-image: url("https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80")
}
.five {
background-image: url("https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80")
}
.six {
background-image: url("https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80")
}
.seven {
background-image: url("https://images.unsplash.com/photo-1543269865-96ae30571b5a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80")
}
.content {
background-color: rgba(0, 0, 0, 0.5);
color: #fff0c2;
font-weight: bold;
font-size: 60px;
border: 8px solid #000000;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 270px;
padding: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="image one"></div>
<div class="image two"></div>
<div class="image three"></div>
<div class="image four"></div>
<div class="image five"></div>
<div class="image six"></div>
<div class="image seven"></div>
<div class="content">W3DOCS</div>
</body>
</html>Example of changing the background image on scroll:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html,
body {
height: 100%;
}
.wrapper {
height: 100%;
font-family: Helvetica, sans-serif;
line-height: 1.5;
word-spacing: 2px;
letter-spacing: 0.5px;
}
.fixed {
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 100%;
width: 100%;
color: #eeeeee;
text-align: center;
display: table;
}
.fixed h2 {
display: table-cell;
vertical-align: middle;
}
.scroll {
background-color: #ffe0f6;
padding: 10px 70px;
color: #666666;
}
.one {
background-image: url("https://images.unsplash.com/photo-1530426509291-d831d721c7b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=968&q=80")
}
.two {
background-image: url("https://images.unsplash.com/photo-1505228395891-9a51e7e86bf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1190&q=80")
}
.three {
background-image: url("https://images.unsplash.com/photo-1521165582142-eaf4bd77b3f6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80")
}
</style>
</head>
<body>
<div class="wrapper">
<div class="fixed one"></div>
<div class="scroll">
<h3>
"There's nothing more beautiful than the way how the ocean refuses to stop kissing the shoreline, no matter how many times it's sent away."
</h3>
</div>
<div class="fixed two"></div>
<div class="scroll">
<h3>
"So that the monotonous fall of the waves on the beach, which for the most part beat a measured and soothing tattoo to her thoughts seemed consolingly to repeat over and over again."
</h3>
</div>
<div class="fixed three"></div>
</div>
</body>
</html>