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

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • 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

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 Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.