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 :

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. # Copy & paste the CSS to the end of your Altitude Pro child themes style.css file and clear caching.

 


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

 

Download Folder