cover feature – background of project content transparent
-
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 -
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
-
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 -
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
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it