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:

0_1509965789844_Bildschirmfoto 2017-11-06 um 11.51.52.png

You set a background picture

0_1509965807612_Bildschirmfoto 2017-11-06 um 11.52.05.png

You make the height of the row the browser height

0_1509965832494_Bildschirmfoto 2017-11-06 um 11.52.13.png

That will look like this

0_1509965847769_Bildschirmfoto 2017-11-06 um 11.52.46.png

You give the first row a class called background

0_1509965865012_Bildschirmfoto 2017-11-06 um 11.53.12.png

You make a second row with some content.

0_1509966067706_Bildschirmfoto 2017-11-06 um 12.00.38.png

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