• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2762

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Premium Access
  • Log in

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
Subscribe for new Tutorials

Essence Pro Theme

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
 

Loading Comments...
 

You must be logged in to post a comment.