Essence Pro Remove Background Gradient From Header Hero Image

This tutorial shows you how to remove the background gradient from the Hero image in the header of the Essence Pro child theme by StudioPress.

By default, the gradient adds a darkness to the image. This is added using inline CSS on line 169 ( or line 224 i newer version ) of essence-pro > lib > header-functions.php as you can see in the following code :

linear-gradient(0deg, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.85) 100%),

This CSS adds the darkness to the image which you can see in this example :

To remove it, remove the CSS from the PHP code so its modified like this :

$output = '<style type="text/css">.header-hero { background-image: url(' . esc_url( $bg_image ) . '); }</style>';

Removing the gradient gives you this :

Which shows you why the Developers of this theme added the gradient.

Related Tutorials

• Remove Image Gradient Conditionally From Essence Pro
• Remove Featured Image From Hero Header Not Archives In Essence Pro
• How to Remove Header Background Image for Essence Pro