• Skip to main content

Brutal Business

Finding a Straighter Line to Results

  • Blog
  • About
    • Brutal Business
    • Francisco Ruiz
    • In Gratitude
  • Contact

Add Front Page Image Overlays to Genesis Infinity Pro

February 28, 2017 by Francisco Ruiz

Genesis Infinity Pro Without Overlay
Genesis Infinity Pro With Overlay

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;
}
FacebookTweetLinkedInEmail

Filed Under: Genesis

Reader Interactions

Comments

  1. Mary says

    February 28, 2018 at 5:57 pm

    I think you are a genius! This has been a huge problem for me and my images. Thank you!

    Reply
    • Francisco Ruiz says

      February 28, 2018 at 7:16 pm

      Thank you so much for the kind words, and I’m very glad to hear that this helps you.

      Reply
  2. Mike Ellis says

    July 2, 2018 at 3:35 pm

    Thank you! Works great and looks great!

    Reply

What Do You Think? Cancel reply

Your email address will not be published. Fields marked with * are required.

  • About
  • Contact
  • Terms of Service
  • Privacy Policy

Copyright © 2013–2023 • Brutal Business, Inc.

Share this ArticleLike this article? Email it to a friend!

Email sent!