index2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Scrolling Background Image</title>
    <style>body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    scroll-behavior: smooth;
}

.background-container {
    height: 150vh;
    overflow: hidden;
    position: relative;
    background-image: url(https://images.unsplash.com/photo-1682687220015-186f63b8850a?q=80&w=1375&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    background-size: cover;
    background-position: 50% 0; /* Initial background position */
transition: all 1s ease;
}

.content {
    padding: 20px;
}

h1, p {
    color: #fff;
}
</style>
</head>
<body>
    <div class="background-container">
        <div class="content">
            <!-- Your page content goes here -->
            <h1>Your Page Content</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        </div>
    </div>
    <script> document.addEventListener('DOMContentLoaded', function() {
        const backgroundContainer = document.querySelector('.background-container');
    
        window.addEventListener('scroll', function() {
            const scrollPosition = window.scrollY;
            const backgroundPosition = `50% ${scrollPosition * 0.8}px`; // Adjust the multiplier for the desired scrolling effect
            backgroundContainer.style.backgroundPosition = backgroundPosition;
        });
    });
    
</script>
</body>
</html>