Colour Overlay for Page Header Images

Currently it's not possible without some custom programming, but it's something I'm looking into :)

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

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

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

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

Cool method, Lyle!

Like it Lyle! Thanks

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.

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

Sorry, I meant using Lyle's method. I will test again, maybe I am seeing things :)

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

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

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

thanks,
ivan

Hi there,

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

Thanks!