Supersized - Full Screen Background - Only on the half?

Question

I would like to use the Supersized Fullscreen background Supersized

But I would like to have the slider only on the right half of the site and on the left one i would like to have my content. When I scroll the content should move and the background stay. Like here: example site

Does anyone have an idea?

EDIT: Alright I got it but how can i make the images responsive? Is it possible?

Answer 1

.supersized {position:fixed;width:50% top:0;bottom:0;}

Answer 2

If you browse with dev tools, you will see this:

#supersized {
    position: fixed;
    right: 0;
    top: 0;
    overflow: hidden;
    z-index: -999;
    height: 100%;
    width: 50%;
}

Answer 3

Your DIV with the content should have a overflow scroll:

<style>
    .content{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 50%;
        overflow: scroll;
    }
    .the-bg{
        background-image: ...;
        background-size: cover;
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 50%;
    }
</style>

<div class="content">lorem ipsum</div>
<div class="the-bg"></div>

Or, you can put the right one fixed:

<style>
    .content{
        float: left;
        width: 50%;
    }
    .the-bg{
        background-image: ...;
        background-size: cover;
        position: fixed;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 50%;
    }
</style>

<div class="content">lorem ipsum</div>
<div class="the-bg"></div>