Colour Overlay for Page Header Images

[Daniel]

Would be great if we could have colour overlays for pages header images like you can with videos.
Or can this already be done somehow?

[Tom]

Currently it’s not possible without some custom programming, but it’s something I’m looking into 🙂

[Daniel]

It would really be a great addition if you could add that feature 🙂

[Tom]

Something like this should actually work in the page header content textarea: https://generatepress.com/forums/topic/semi-transparent-image-overlay-for-sections-and-page-header/#post-158683

[Lyle]

Daniel,

Actually, it’s not that difficult 🙂 Using Tom’s handy dandy Simple CSS plugin, you can add this into the CSS meta box that will be there on each page:

.generate-content-header {
    background-image: linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)), url(http://stuffingeneral.com/wp-content/uploads/2016/11/lyle_wzz1.jpg);
}

You will of course need to adjust for the color(s) and opacity (this setting provides a light overlay) as well as the actual path to your own image. Works a treat 🙂

Cheers!
Lyle

[mikei]

That’s what I did last night with the page header)

[Tom]

Cool method, Lyle!

[Daniel]

Like it Lyle! Thanks

[Daniel]

This method did not work well for me. Also the opacity effects the text content in the page header too.
Would be good to see this feature added so it works like the video option.

[Tom]

Which method did you try? Opacity shouldn’t be used in this case.

[Daniel]

Sorry, I meant using Lyle’s method. I will test again, maybe I am seeing things 🙂

[Lyle]

Daniel,

I see what you mean by the overlay affecting the content as well. So, then try this 🙂

Change the selector in my first example, .generate-content-header to this .inside-page-header-container

Just tried it and everything placed in the Page Header > Content area (text, shortcodes from Elementor, etc.) does not have the overlay applied. Same goes for the site header elements (Title, tagline, nav, etc.)

Cheers!
Lyle

[Lyle]

Just noticed that I also had to add background-repeat: no-repeat; 😉

[Ivan Cazorla]

Hi there! Is it yet possible to add color overlay on the image?

thanks,
ivan

[Leo]

Hi there,

Like an image not in page header? If so can you start a new topic?

Thanks!

[Author]

Posts