How To Change Background Images On Scroll Using CSS

admin_img Posted By Bajarangi soft , Posted On 27-11-2020

Using CSS we can change background image on scroll .So today we discuss how to do it.

How To Change Background Images On Scroll Using CSS

Complete Code For Changing Background Images On Scroll Using CSS.

<!DOCTYPE html>
<html>
<head>
    <title>How To Change Background Images On Scroll Using CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
    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://cdn.hipwallpaper.com/i/8/69/axsw6m.jpg"); }
    .img2 { background-image: url("https://cdn.hipwallpaper.com/i/33/33/qXkVug.jpg"); }
    .img3 { background-image: url("https://cdn.hipwallpaper.com/i/70/10/0cXVqT.jpg"); }
    .img4 { background-image: url("https://cdn.hipwallpaper.com/i/78/43/6dxNQW.jpg"); }
    .img5 { background-image: url("https://cdn.hipwallpaper.com/i/83/19/rW7KnV.jpg"); }
    .img6 { background-image: url("https://cdn.hipwallpaper.com/i/95/37/RTd6Hh.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: 60%;
        padding: 20px;
        text-align: center;
    }
</style>
<body>

<div class="container">
    <br/><br/>
    <div class="text-center">
        <h1 id="color" style="color: white;">Change Background Images On Scroll Using CSS</h1>
    </div>
    <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">Change Background Images On Scroll</div>
</div>
</body>
</html>

Related Post