cover feature – background of project content transparent

[lina_h]

Hello everyone,

first of all I am a big fan of Laytheme and am using it a lot for client projects!
This forum has helped me a lot in the past – now I have an issue I hope somebody can help me with.

I am using the cover feature for showcasing the project as seen here: https://linaherschel.com/cover-test/
Is there a way that the cover picture on the black background remains visible in the background when crolling down and the rest of the content has a transparent background? At the moment the project content background is white.
So idealy the project content overlays the fixed cover picture when scrolling down.

I would like to use this effect both on Desktop and mobile.

Thank you for your support in advance!
All the best,
Lina

[arminunruh]

can u try this instead of the other code i posted:

.cover-content #grid{
background-color: rgba(255,255,255,0.9)!important;
}

.hascover #footer-region,
.cover-content,
.cover-region{
background-color: transparent!important;
}

i made a mistake

[lina_h]

Dear @arminunruh,

thank you very much for the quick response!

I have implemented the code, but the background of the content is still white instead of the wanted transparent.

I have made a quick video of the effect I wish to achieve with another example build in XD: https://www.dropbox.com/scl/fi/4ing2voy3wo90p546hwsc/wanted-scroll-effect_.mov?rlkey=6qyezbh02y06i1muekzutkmr7&dl=0

The first row of my Layout is the cover (a video in this example) and the rest of the content (images and text) should overlay the cover video.

Do you have another idea how to get there?

Thank you again in advance :)
Lina

[arminunruh]

can u try this instead of the other code i posted:

.cover-content #grid{
background-color: rgba(255,255,255,0.9)!important;
}

.hascover #footer-region,
.cover-content,
.cover-region{
background-color: transparent!important;
}

i made a mistake

[lina_h]

thank you so much, now it works 🖤

All the best,
Lina