<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Fixed Background Scrolling Effects</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <section class="sec1"></section>
    <section class="sec2"></section>
    <section class="sec3"></section>
    <section class="sec4"></section>
    <section class="sec5"></section>

</body>

</html>
body{
    margin: 0;
    padding: 0;
}

section{
    height: 100vh;
    border-top: 1.5px solid #262626;
    background: cover;
}

.sec1{
    background: url(https://i.postimg.cc/cCsjd57p/image1.jpg);
    background-attachment: fixed;
}

.sec2{
    background: url(https://i.postimg.cc/C5N3DVLM/image2.jpg);
    background-attachment: fixed;
}

.sec3{
    background: url(https://i.postimg.cc/DZhpcYNS/image3.jpg);
    background-attachment: fixed;
}

.sec4{
    background: url(https://i.postimg.cc/59nKwgSt/image4.jpg);
    background-attachment: fixed; 
}

.sec5{
    background: url(https://i.postimg.cc/mDTV91cM/image5.jpg);
    background-attachment: fixed; 
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.