Minimum Theme: How to Lay Text Over an Image

Have you seen the Pretty Pictures Theme from StudioPress? It’s stunningly simple and right in line with the other clean, minimal themes created by Brian Gardner.

The text overlay on the large featured image is one of my favorite design elements of Pretty Pictures. The theme layout cleverly takes advantage of  Genesis custom header support to pull this off. You just go to Appearance > Header to upload your background image and then tootle on over to Appearance > Widgets > Header Right to add your overlay text.

Pretty Pictures Featured Image

But if what if you’re not using Pretty Pictures and want to add the text overlay effect to a different StudioPress Theme?

A couple of readers asked this question after I posted about how to add a featured slider to the Minimum Theme. This post will show you one way to go about it.

Text Overlay on the Minimum Theme

I’m going to tackle this simply. The large featured image that appears on the Minimum home page is hard-coded. We’re going to use a widget area plus a little CSS to place our text over the image.

Create a New Widget Area

We need to register a new widget area to house the text we’re going to show over the featured image. From your WordPress admin dashboard, go to Appearance > Editor and open up functions.php.

New to editing code? Any time you’re working directly in the functions.php file, you risk making a mistake that’ll take your site DOWN. Be ready to get access to your site via FTP to rescue any mis-placed semi-colons.

Please read this article before making any edits.

Add this bit of code, preferably toward the bottom of the file with other widgets being registered:

Add the Widget Area to the Home Page

If you were to go check out Appearance > Widgets, you’d see that your new widget area exists. Now we need to specify where it shows up.

We’re still rooting around in functions.php, so find the featured image section (around line 66 in a default install of the Minimum Theme).

Change this:

function minimum_featured_image() {
    if ( is_home() ) {
        echo '
';
    }

To this:

function minimum_featured_image() {
    if ( is_home() ) {
	echo '
';
    }

Add some CSS Styling

Open up your stylesheet and locate the style for the #featured-image. This is going to be the container that holds our featured image as well as our overlay text. Change it out to this:

#featured-image {
     height: 600px; /* Set this to your actual image height */
     margin: 0 auto;
     position: relative;
     width: 1600px; /* Set this to your actual image width */
     z-index: 0;
}

Next we need to style the actual featured img. In the previous step we added a class called underlay, so let’s add some style for that:

.underlay {
     position: absolute;
     z-index: -999998;
}

The z-index property works within positioned elements to stack, or layer, items. Giving a ridiculously large z-index to the image basically ensures it’ll display BELOW our text. You can read more here about how z-index works.

Last, but not least, we need to style our widget area that’s going to hold our overlay text. Your style will vary based on your design and whether you want the text to fall on the left, right, or center of your image. Here’s an example if I wanted my text to be on the left side.

.my-text {
    overflow: hidden;
    padding: 10%;
    width: 30%;
}

.my-text p, .my-text h4 {
    color: black;
    margin-bottom: 15px;
    text-shadow: 1px 1px #CCCCCC;
}
I haven’t tested out these additions for mobile responsiveness. You may need to tinker with the CSS.

After testing the above code, here’s what I came up with for the home page on the Minimum Theme:

Text Overlay on Featured Image of Minimum Theme

Try it out and let me know how it works for you!

79 thoughts on “Minimum Theme: How to Lay Text Over an Image”

  1. Hi Carrie, I appreciate your tutorial as it is very helpful! I have one question. Is it possible to give the widget functionality to place the overlay text at different locations? So have an option to click for top center, top left and top right and so on? Any advice is appreciated.

  2. This article contained the objective that I’m trying to achieve. Unfortunately, this was written more than four years ago and the minimum-pro theme has apparently changed during that time. I say this because the functions.php doesn’t contain the code that you reference. For example, function minimum_featured_image() is not in the current functions.php of the minimum theme.

    As a result, this post in its current form is almost useless.

    1. Sorry, mate. It’s hard to keep a library of free resources up to date. That said, the coding principles are still quite valid even if the code isn’t an exact match to the current version of Minimum Pro.

  3. Hi Carrie, do you have an updated (for 2020) tutorial for the text overlay on the Minimum Pro front page featured image? Is there one you can refer us to?

    1. Hey Jacqueline, the good news is it’s WAY EASIER now. You’ll want to use the new Gutenberg block editor to create the home page (not the classic editor). There’s a block specifically for overlaying text on a background image.

Leave a Comment

Your email address will not be published. Required fields are marked *

Carrie Dils uses Accessibility Checker to monitor our website's accessibility.