css code to lighten the background image as the page is scroll down-CodePudding

I want the home page of a website I am working on to get lighter. The background image is dark blue and as the user scrolls down, I want the image to become light blue. An example of this can be found in this template: https://www.wix.com/website-template/view/html/1896?originUrl=https://www.wix.com/website/templates&tpClick=view_button&esi=c5ca042c-26c4-41cb-bc5f-01e47031976d

I have created a sample page. The link is: https://codepen.io/jimmyhulk/pen/NWBOGRm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>SkyLine</title>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
</body>
</html>

body {
    background-image: url('bicycles.jpg');
}

I would very much appreciate some explanation of the code because I am very new at this.

I have added the image as the background and have also added some sample text so that there is enough content on the page to be scrolled down.

CodePudding user response：

You can achieve this effect by using a linear-gradient background image.

For example:

background-image: linear-gradient(to bottom, #0000FF 0%, #00FFFF 100%);

This will create a gradient from dark blue to light blue as the user scrolls down the page.

There is a difference with the page you sent as an example, in the web page you sent they use a transparent layer over the page with a gradient.