Change hero image overlay color

[Cleo3]

I'm working on this site using the Essence Pro theme:

https://truwestmorgans.com

My client wants the hero images to be "less black" but of course I want the text to remain legible.

Am I missing a setting that controls overlay color? Inspect and even just reading the style.css are leaving me without an idea what to change. I'd like to try maybe a brown color to see how they like that.

What am I missing? TIA

https://truwestmorgans.com

[Victor Font]

Look for the following code in the theme's /lib/header-functions.php file around line 179:

if ( $bg_image ) {
		$output = '<style type="text/css">.header-hero { background-image: linear-gradient(0deg, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.85) 100%), url(' . esc_url( $bg_image ) . '); }</style>';
	}

Change the .5 and .85 in the two rgba functions to lighten the black.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Cleo3]

Thank you! That would explain why my css approach wasn't working.

Unfortunately, I can't find find that line anywhere in the Essence Pro functions file. Line 179 adds support for custom logos. And the following is all I can find that has to do with the hero image but it doesn't control color/transparency.

// Adds support for custom header.
add_theme_support(
'custom-header', array(
'default-image' => essence_get_default_hero_background_image(),
'header-text' => false,
'header-selector' => '.header-hero',
'flex-height' => true,
'flex-width' => true,
'height' => 800,
'width' => 1600,
'wp-head-callback' => 'essence_header_style',
)
);

I tried Inspect yet again and this time it got me closer. If I add this to my Additional CSS (the method I strongly prefer for handling this in this multisite) I get the nice dark chocolate brown overlay I think the client will find more pleasant. However, and this is a deal killer, it locks all the hero images into being that one in the URL. I want to use both the random option with both header images I uploaded in Customizer and especially using the Featured Image as the header on those pages/posts that have a Featured Image specified.

I'd like to just change the color of the overlay but not specify the URL of the background image. I tried just removing the URL but of course that doesn't work.

Is there a workaround for this? TIA

[Cleo3]

Whoops. I forgot to paste my css.

/*
.header-hero {
background-image: linear-gradient(0deg, rgba(49,13,0,0.5) 50%, rgba(49,13,0,0.85) 100%), url(https://truwestmorgans.com/wp-content/uploads/sites/5/2018/10/cropped-19366121_1540024086037362_1268328797480443173_n.jpg);
}
*/

[Brad Dalton]

Try around line 169 of essence-pro > lib > header-functions.php to modify the linear-gradient

---

Get Help – Book Consultation.

[Cleo3]

Oh, thank you Brad! That did the trick! And now I know another place to look for these things. 🙂

This is resolved now.

[Author]

Posts