• 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

Overlay Text on Half of Background Image

This solution positions your widget content over half of your background image with a semi transparent background text on desktops like this :

Text Over 50% of Image

On smaller hand held screens, the transparent background covers your entire image and your widget content is positioned over the centre of your image as seen in the following demo video.

Demo Video

Shows the front page 3 widget area content displaying on a semi transparent background over half of the background image.

Tested using the Altitude Pro child theme by StudioPress however will work in any widget area in any Genesis child theme.

Installation Steps

There’s 3 steps :

  1. # Upload the front-page.php file to your Altitude Pro theme folder replacing your default front-page.php file. The code has been modified on lines 130 and 131.
  2.  

  3. # Copy & paste the CSS to the end of your Altitude Pro child themes style.css file and clear caching.
  4.  

  5. # Add your HTML to a custom HTML widget in the front page 3 widget area.
  6.  

Download Folder

Altitude Pro Background Image

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.