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. Cariie,
    Thanks for the tutorial, I have a little different twist to the question here. I have seen on many sites where they have put a widget over a slider. For example, real estate websites that have an image slider and put a search box right over the top of it, or an image slider with a contact box/form over the top of it. Would this work for that application or can you explain how that would be different? Thanks

    1. Hi Ryan,

      The concept would be the same – you could either hard code your slider (instead of the static image in this demo) or just create two widget areas and use CSS to position them on top of each other.

      Depending on the slider you’re using, a lot of them have titles/excerpt overlays built in to them, which might tackle everything you need in one.

      Cheers,
      Carrie

  2. Hi Carrie, This is a fantastic tutorial. Relatively easy even for a complete beginner like myself!

    I am slowly building my site and when I do everything described above, the featured image disappears, even though the text shows as it should. Any clues? Here’s what I have in functions.php

    function minimum_featured_image() {
    if ( is_home() ) {
    echo ”; // add underlay class
    genesis_widget_area( ‘my-widget’, array( ‘before’ => ”, ) ); //replace widget ID if needed
    echo ”;
    }

    1. Are you using older Minimum or Minimum Pro? This tutorial was written before Pro was available. Try changing the conditional from is_home() to is_front_page() and see if that does the trick.

      1. Hi Carrie, Thank you for the reply! I’m using Minimum 2.0.1
        I managed to get the image to show up. The image shows as a different size than before (my image file is exactly the same size as sampleimage.jpg). On my laptop this causes a horizontal scroll bar because the image no longer fits. On the large screen of my desktop, the text appears differently in relation to the image because the image has the space it needs.

        here’s what i have in functions.php. Is it the way I’ve accessed the image? Thank you again for the tutorial and you’re speedy help!

        function minimum_featured_image() {
        if ( is_home() ) {
        echo ”; // add underlay class
        genesis_widget_area( ‘my-widget’, array( ‘before’ => ”, ) ); //replace widget ID if needed
        echo ”;
        }

        1. I apologize, I posted the wrong code. here it is:

          function minimum_featured_image() {
          if ( is_home() ) {
          echo ”; // add underlay class
          genesis_widget_area( ‘my-widget’, array( ‘before’ => ”, ) ); //replace widget ID if needed
          echo ”;
          }

  3. Hi Great article, thankyou. Can I also do this on the featured image of a portfolio item in minimum pro theme?

  4. Hey Carrie, great tutorial once again. Thanks for sharing the goodness. BTW, the link to Pretty Pictures Theme returns a 404 error. You might want to fix that. Thanks!

  5. Thanks, Carrie.

    I’ve found myself stuck on your website as I re-design mine… Seriously considering one of your courses to gain a better understanding of Genesis hooks and PHP. Is there one in particular you recommended?

    – Sean

    1. Hey Sean!
      Absolutely. I’d start with Customizing themes with Genesis for WordPress. That course focuses on “deconstructing” Genesis and working with hooks and filters.

      From there, WordPress and Genesis: Building Child Themes from Scratch will help you understanding creating a theme from the ground up.

      Those are both Lynda.com courses. If you don’t have an account there, use this link (lynda.com/trial/carriedils) for a free 10 day trial. That’s plenty of time to take both courses. 🙂

      Cheers,
      Carrie

  6. hi could this work for the featured image widget. The title is currently above the image. But I want to position an overlay with the title on the bottom of the 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.