scrolling effect over background image

[Susi]

Hey guys,

I have a question about scrolling effects and background images. So on http://pineal.studio/ the body is scrolling OVER the background image. How can I make that work? Do I need a plugin or work with the code, or did I just overlook the option in the laytheme?

Thank you so much for helping!
Susi

[Susi]

@susi
ok, is it possible, that I need the Fullscreen-Addon for this effect?

[mariusjopen]

Hi @Susi

That is also possible without plugin.

Have a look here:

You set a background picture

You make the height of the row the browser height

That will look like this

You give the first row a class called background

You make a second row with some content.

You give that row the class: second-row

.background {
    position: fixed;
    top: 0px;
    margin: 0px;
    left: 0px;
    width: 100vw;
}

.second-row {
    margin-top: 100vh;
}

You add this to your Custom CSS code.

DONE!

I hope that was easy to understand :-)

Best!

Marius