[Resolved] Page Hero Background Video

[Carlotta Gergely]

Hi, I need a video in the page hero. I found your documentation article and adopted it. It works fine but I need another background color for the opacity than the body one which is used. How can I change it? I tried to add a color to the additional html but it didn’t work.
Thanks for feedback
Carlotta

[David]

Hi there,

You can change the background color in the Header Element and set this to overlay.

[Carlotta Gergely]

Hi David,
that’s what I thought first but it doesn’t work. It’s related to the body color in customizer and it is ignoring what I set in page hero.

[David]

Odd, any chance you can open the site so we can see that page?

[Carlotta Gergely]

just created a test user if you want to go in.
the site is https://dev.discover-health.center, userid ***, pw ***
the problem is on the front-page

[David]

OK, scrap that – it only applies to Images, my bad.
Try this CSS:

.page-hero:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 0, 0, 0.5);
    display: block;
    z-index: 1;
}

[Carlotta Gergely]

Hi David, it works but there is now an overflow of the background-color. It seems that it doesn’t work together with overflow hidden. How can I manage this?

[Carlotta Gergely]

Hi David,it works now, thanks for your help!!

[David]

Glad to be of help!

[Author]

Posts