Add Front Page Image Overlays to Genesis Infinity Pro

The Issue

If you’re using the Genesis Infinity Pro theme for WordPress, you undoubtedly will appreciate the full-width background image sections it displays on the front page.  However, unlike the Genesis Altitude Pro theme (or several others) released before it, Infinity Pro does not include overlays on those image sections.  This means that text displayed in those sections can be difficult to read, especially if the background images have a somewhat light color overall.

One way around this, of course, is to use darker background images:  you could lower the exposure or apply a screen filter with photo editing software, then upload the edited images.  But this is not a good approach:  it forces you to tamper with your images.

A better and easier approach is to add your own image overlays using CSS, as shown above.  Here’s how to do it.

Solution Overview

Infinity Pro has four sections on the front page that are defined with background images, namely front-page-1, front-page-3, front-page-5 and front-page-7.  The idea is to specify background image overlays by defining a :before CSS pseudo-element on each of those four front page sections.

The four :before pseudo elements will be positioned as absolute with top and left set to 0, and height and width set to 100%.  This will place and fit them in exactly in the same space occupied by each of the four corresponding front page sections, as each of those have their position set to relative.

We also adjust the z-index of the pseudo elements:  the underlying front page sections have their z-index set to 9, so we set the pseudo elements to 0 (zero) to ensure the overlays appear underneath the text that appears in those corresponding sections.  Note that if you set the psuedo element z-index values to something other than 0 it may not work on IE, in my testing I found that 0 works best across all browsers.

Finally, for front-page-1 we explicitly set the position to relative and the z-index to 9.  This is because Infinity Pro does not have those properties defined on front-page-1 (even though as noted earelier, those properties are already defined on the other three front page sections that have background images).

Detailed Instructions

Copy the CSS code below to the end of your Infinity Pro theme’s style.css, or use the WordPress Customizer to add the CSS code into the Additional CSS area.

Adjust the background’s rgba() opacity value (.3) to your personal preference.

/* CSS:  Add Front Page Image Overlays */

.front-page-1 {
	position: relative;
	z-index: 9;
}

.front-page-1:before,
.front-page-3:before,
.front-page-5:before,
.front-page-7:before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(0, 0, 0, .3);	/* adjust the opacity (.3) as desired */
	z-index: 0;
}