Essance Pro Header Image

[Bern1971]

Hi
The essance pro header image is darker than the actual image when loaded on to the site. When you load the image in to a post, it is very bright like the image should be. When it's loaded as the header image, the site makes the image darker.

Is there a way to stop this?

Thanks

[Marc]

Yes, there is.

The theme is loading a gradient overlay to darken the header hero image, this makes the text for titles and navigation standout. When you remove the darkening gradient you may need to adjust the overlay text. Depending, of course on the nature of your hero image.

This is the inline code that loads and creates the hero-header image and dark overlay in the demo -

.header-hero {
background-image: linear-gradient(0deg, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.85) 100%), url(https://demo.studiopress.com/essence/wp-content/themes/essence-pro/images/hero-bg.jpg);
}

With that in mind here is the quickest way to remove the header hero gradient overlay -

From your Admin go to Appearance > Customize > Additional CSS

And paste the code above into the CSS box as it is edited below to remove the dark overlay. Of course you will need to modify the image URL to your installation's resource location -

.header-hero {
url(https://demo.studiopress.com/essence/wp-content/themes/essence-pro/images/hero-bg.jpg);
}

---

Resultz Digital | Websites, search marketing services and consulting for small business.

[Bern1971]

Thank you - that worked

[Marc]

You are very welcome!

---

Resultz Digital | Websites, search marketing services and consulting for small business.

[Author]

Posts