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

WP SITES

2468

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Subscribe
  • Register
  • Videos
  • Log in

Need Help? - Get Coding Support Now

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 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.

Subscribe for new Genesis Tutorials

Essence Pro

Primary Sidebar

Recently Coded

  • Infinity Pro – Change Team Page From 4 To 3 Columns
  • Infinity Pro Vertical Menu
  • Genesis Sample Theme – Custom Archive Page Template With Different Hero Images
  • Foodie Pro – Reposition Search Box Before Nav Menu
  • Showcase Pro – Use Custom Image As Single Post Entry Header Background

Brad Dalton Specializes In Genesis child theme customization & code modification.

Advertise · WPEngine · Genesis · Log in

  • Membership
  • by Theme
  • Contact
  • RSS
  • Newsletter ( Twice Weekly )