Parallax help

[mode500]

Hello,

I have a global block set as a section lower background layer at the top of the page that I am having difficulties with. The issues that I am currently facing are that I want the whole section to be the size of the screen upon load and that I want the section to be totally fixed so that the second section (below) scrolls over the top of the first section when the user scroll down.

I have added the following CSS to the global block but nothing appears to work:

$el {
min-height: 100vh;
transition: none !important;
}

If I add the same code to the actual section for some unknown reason it kicks the whole block and the heading is not visible. What am I doing wrong?

I also have the following CSS for the section itself:

$el {
transition: none !important;
background-attachment: fixed;
}

And also should I be adding the CSS to the global block or the section itself or even both?

Here is the test page that I am trying this out on: https://mode500.com/newest/

Thanks in advance!

[ruenel]

Hello @mode500,

Thanks for writing in! In your first Section, you do not have have a Row and Column element. Please add a Row and 1 Column. Remove the margins and paddings in your Section element and then in your Column settings, set the minimum height to 100vh.

Kindly let us know how it goes.

[mode500]

Okay I have added the row and column element and the following CSS to the section:

$el {

transition: none !important;
background-attachment: fixed;
min-height: 100vh;
}

However as previously stated as soon as I add min-height: 100vh; to the sections CSS it kicks out the global block and you cannot see the headline on screen.

And I removing the margins and padding from the section only or the global block also?

Thanks.

[ruenel]

Hello @mode500,

Remove the CSS code from your Section element:

$el {

transition: none !important;
background-attachment: fixed;
min-height: 100vh;
}

In your Column element, set the minimum height like this:

Also, you will see is the Pink color because you have also set Pink as the background color of your section. Change it to Transparent so that the background color of the Global Block will be visible. Lastly, you can add the min-height: 100vh; to the Section element in your Global Block.

Still, I do not think this will make the whole section to be the size of the screen upon load and then the section to be totally fixed so that the second section (below) scrolls over the top of the first section when the user scroll down. Why don’t you try this sample structure instead:

The DIV element is positioned as Fixed and it contains the headline and the Image element. The Row/Column is just a placeholder which also has the minimum height of 100vh. So that you will understand what I am saying, please check out this sample template instead:

• https://www.dropbox.com/s/zzh5dnataogcyxg/fixed-div.tco?dl=0

Hope this helps.