[Resolved] Question about Hero Image

[Shannon]

Hello,

I’m wondering about the moving image shown in this website here:
https://www.terrapingeo.com/

Can that be done with GeneratePress? Also, it repeats down the page… how would I go about doing that?

Thanks.

[Leo]

Hi there,

Not by default but you could consider using a header element with background video:
https://docs.generatepress.com/article/header-element-overview/
https://docs.generatepress.com/article/page-hero-background-video/

Let me know if this helps 🙂

[Shannon]

Do you have an example of what that looks like?

[Leo]

I don’t have an example of page hero with background video unfortunately.

It would look like this example but with a background video:
https://docs.generatepress.com/article/page-hero-examples/#example-3

[Shannon]

Ok. I will see what I can do.

[Leo]

Sounds good 🙂

[Shannon]

Ok… so I got this to work.

But the css on the content is off now..

I’m wondering why the fonts and border and such are different now.

[Shannon]

I also notice the content does not seem to have the buttons as links now either.

[Leo]

Edit this CSS:

.page-hero-content {
    padding: 20px;
    border: 2px solid #ffffff;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 0px;
    max-width: 350px;
}

to this:

.page-hero-content {
    padding: 20px;
    border: 2px solid #ffffff;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 0px;
    max-width: 350px;
    position: relative;
}

[Shannon]

Great. Thanks! That fixed it.

[Leo]

No problem 🙂

[Leo]

No problem 🙂

[Shannon]

Hello again Leo,

When I shrink the screen to a size for mobile, the z-index fix doesn’t work. What I mean is that the content in the hero image video seems to go behind the video again.

Do you have css that would fix that?

Also, what should parallax on a section do on a page? I’ve added a background image and set that to be “on” for a section on a page, but there is no visible animation with scrolling.

[Leo]

Can you link me to the page in question?

I don’t see it in this thread anymore.

[Shannon]

Sorry… I did delete it. It was a test page… I’ve since made another.
https://annelida.ca/new-home/

When you shrink it down, you’ll see the text in the hero video get overlapped by I think the video? The positioning is off, but there is a reason for that… it was originally meant to fit with a different image and this is just a functionality test to see how a video looks.

This page doesn’t have the section for the graphic I’m having issues with in terms of parallax though. I’m working on that elsewhere.

[Author]

Posts