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

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

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

Essence Pro Theme

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems