Site title below background cover video

[dmncn]

Hi,

I have a page with the first row set as a full-height background video and the option "Cover page" checked.

I would like to hide the site title (that is a fixed image) under the video, so that it is shown only when user scrolls down.

I tried to adjust the z-index of the containers but without results.

.sitetitle {
    z-index: 2!important;}
    
.cover-inner {
    z-index: 999!important;}

If I set a value smaller than 2 for the .sitetitle it disappears.

Thanks in advance

[Richard]

Dear @dmncn

Are you able to post a link to the cover / page in question just to get a better idea about whats going on 🌝

---

Talk soon

Richard

[dmncn]

Hi Richard,

the site is still in development, I can give you private access to the WP admin if needed.

These are the screenshots of the page without any custom CSS.

The first is the page as it opens, with a fullscreen background video. The drawing of the man on the upper left corner is the PNG site title. As you can see it overlaps the video.

The second is the page that scrolls down.

I would like the site title to stay under the background video and be discovered as the user scrolls down, only adjusting the z-index of the two elements.

Thanks in advance.

[Richard]

Dear @dmncn

It's a bit of a trick with just z-indexing alone. The whole system works on z-index:

• Cover: z-index 1 (must be the lowest to slide underneath content)
• Content: z-index 2 (must be higher to not be hidden by cover)
• Site-title: z-index 3 (must remain above content).

So i think however you assign new z-indexing to the above three elements it wont work for example:

• Cover: z-index 1 (must be the lowest to slide underneath content)
• Content: z-index 2 (must be higher to not be hidden by cover)
• Site-title: z-index 0 (must remain behind cover == but now hidden by content).

To use z-indexing for the site-title to be hidden then shown, the Cover must be higher than the image, but then it's also higher than the content and will not slide behind and therefore not be a cover.

I think to solve this problem you need some javascript or jquery that "at a certain scroll position the site-titles z-index changes from 0 to 3"

---

Best

Richard