How can I make a div which "bleeds" an image as you scroll the page

So many times I have been browsing and I see an effect in which a div shows an image, and as you scroll down the page, the image shifts down (inside the div).

For example: https://www.microsoft.com/en-us/windows/compete (Scroll halfway down the page)

I am trying to replicate the effect you see on the above link. I have attempted this:

<div style="height: 200%; width: 100%; background-image: url(...)">
<div style="height: 66.66%; width: 100%; background-color: white;"></div>
<div style="height: 66.66%; width: 100%;"></div>
<div style="height: 66.66%; width: 100%; background-color: white;"></div>
</div>

But it doesn't seem to be working. I know it isn't very much to go on, sorry, but I can use answers different from my above approach. jQuery and Bootstrap can be used.

Answers 1

  • .static-background {
        background-image: url("http://i.imgur.com/cY0blMA.jpg");
        background-attachment: fixed;
        background-size: cover;
        min-height: 600px; 
    }
    .content-container {
        height: 1200px;
    }
    <body>
    
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non dignissim urna, eget vestibulum metus. Suspendisse potenti. Duis sodales ultricies sem, id tempor nulla mollis sed. Nulla facilisis finibus bibendum. Aliquam id justo neque.
    </div>
    
    <div class="static-background"></div>
    
    <div class="content-container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non dignissim urna, eget vestibulum metus. Suspendisse potenti. Duis sodales ultricies sem, id tempor nulla mollis sed. Nulla facilisis finibus bibendum. 
    </div>
    
    </body>

    I think this is the effect you're trying to achieve. You just create an empty div element with a fixed background and height.


Related Articles