Specific fixed row

[DLB]

Hi there,

I’m trying to figure out how to have a specific fullscreen image (100vh) fixed when scrolling.

This Lay theme website is a perfect example of what I’m trying to implement:
http://bodyandspace.de
When scrolling down the second to last row is fixed (with a fullscreen image), so it looks like it’s behind the rows above. The last row then scrolls over the second to last fixed row. I’ve inspected the code for this site, but can’t seem to figure it out.

I know how to make a full screen image (or another element) fixed using custom HTML / CSS, but this just appears fixed in the first row. So I’m assuming there is a way to target a specific row element further down?

Any pointers / direction or help, would be greatly appreciated.

Thanks very much, Des

[Richard]

Dear Des

@DLB

The row itself is empty within the Gridder but has been given a custom class called parallax. You can do this by 'right-clicking' on the row "set HTML Class and ID" :

You can see here the Row is empty of content but has the class:

They have some custom CSS:

@media (min-width: 601px){nav.second_menu li:last-child {
	display: none;
}

img.lazyloaded, .col img.lazyloaded {
	height: 100vh;
	object-fit:cover;
}

.hero-section {
  width: 100%;
  	height: 100vh;
	object-fit:cover;
  overflow: hidden;
  position: relative;
}

.hero-section img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
}

.parallax {
  /* The image used */
  background-image: url("https://bodyandspace.de/wp-content/uploads/2021/05/PRO22454.jpg");

  /* Set a specific height */
  min-height: 500px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}}

You can see the image is applied to the row as a background via URL.

This link will help you with inspecting behind the scenes of website to find out how they work:

https://www.khanacademy.org/computing/computer-programming/html-css/web-development-tools/a/using-the-browser-developer-tools

https://laytheme.com/documentation/custom-css-styling.html

---

Best

Richard