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.

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.

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

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

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