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" :
[image: Screen Shot 2022-05-10 at 12.03.55 PM.png]
You can see here the Row is empty of content but has the class:
[image: Screen Shot 2022-05-10 at 11.43.40 AM.png]
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
