Carrie Dils

WordPress Developer, Consultant, and Instructor

Minimum Theme: How to Lay Text Over an Image

Originally published on by 79 Comments

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!

Reader Interactions

Comments

  2. Hi Carrie
    I think that from an SEO point of view all text should be real text and not text that is part of an image.
    The GoogleBot can only read real text, it can’t read image text.

    The Pretty Pictures theme solved the problem, but sadly no solution for Minimum 2.0… until the Genesis coding fairy appeared just before the New Year and sprinkled coding dust over the functions.php file.

    Thanks for coming up with what my old maths teacher would call “an elegant solution” and a solution that most genesis users would be able to attempt.

    Having a solution like this means that you can change the text, restyle the text and reposition it.
    Lots of Minimum 2.0 users will absolutely love this.

    BTW – I have got to have a pair of those boots, just got to!

    Happy 2013 to you and yours Carrie.

    Reply

    • Keith, you are spot on regarding SEO benefits to using actual text. I think the text also renders cleaner as opposed to any pixelation that might happen when saving to jpg or png.

      Can’t wait to see this in action on your site. Let me know if you run into any problems!

      As for those boots, Texas is crawling with them. You make it over to this side of the pond and I’ll take you shopping myself. 😉

      Reply

  3. Really great tutorial, here is what I had to do to get this tor work.

    Using this code allows you to keep the same “sample.jpg” structure of the original. I also changed the names of the widget and the class. I called them “text-overlay” and “widget-text-overlay”.

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

    Here is how I registered the widget:

    /** Register widget area */
    genesis_register_sidebar( array(
    ‘id’ => ‘text-overlay’,
    ‘name’ => __( ‘Text Overlay Widget’, ‘theme-slug’ ),
    ‘description’ => __( ‘Places text over homepage image’, ‘theme-slug’ ),
    ) );

    And then of course changed the CSS a bit to this:

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

    .widget-text-overlay p, .my-text h4 {
    color: black;
    margin-bottom: 15px;
    text-shadow: 1px 1px #CCCCCC;
    }

    Works great though, thanks for the write-up, made my life much easier.

    Reply

  4. I echo the “SEO likes this” comment, it’s definitely better to have the text be “text” if at all possible. (I was noting this earlier this morning while reading someone else’s blog, and contemplating writing a plugin to reposition caption text on top of the image. Oh well…)

    I did have to chuckle, though – in all the above images dealing with real text on photos, the text is not real text! lol

    Reply

  5. Hi Carrie, I am trying to add an opague background around the text widget and for some reason it’s putting it around the text and not the text widget itself. How can I add an opaque background to the widget area? Thanks in advance.

    Reply

  6. Great post!

    Ok, full disclosure here: Im a bit of a noob.

    However, I have changed all the code and set everything up as described here but Im obviously missing something – How (or where) are you actually putting the text?

    I tried just dropping a Text area into ‘My Widget’ but that didnt seem to work. What am I missing here? I feel like its something obvious and elementary…(See Noob).

    Thanks in advance for the help!

    Reply

    • Hey Josh,
      Glad you found it helpful. Gotta check with you – did you actually type text into the text widget? If it’s a empty widget, nothing will show. 🙂 Provide a link to your site and I’ll see if I can help troubleshoot!

      Carrie

      Reply

          • Sure thing! Here’s what I have in my functions.php file:

            function minimum_featured_image() {
            if ( is_home() ) {
            echo ”;
            genesis_widget_area( ‘my-widget’, array( ‘before’ => ”, ) );
            echo ”;
            }
            elseif ( is_singular( array( ‘post’, ‘page’ ) ) && has_post_thumbnail() ){
            echo ”;
            echo get_the_post_thumbnail($thumbnail->ID, ‘header’);
            echo ”;
            }
            }

          • Ah! Try this:

            if ( is_home() ) {
            echo ‘

            ‘;
            }

            Just need to throw those divs in there and you should be good.

  7. Your tutorial worked perfectly for me, absolute beginner.
    My next step is to adapt this tuto to add an optin-form over the featured image of my home page.
    Thanks a lot Carrie !

    Reply

  8. Just a quick note. This is a good tutorial, but unfortunately, if you change anything else in the way Minimum was made, you’ll likely break other things in the process.

    For example… While it works fine for the homepage, it also means that all featured images in the site have to be the same size as the homepage image. In the site I’m working on, only the homepage image is 1600px wide. All the post featured images are 740px (content width). Secondly, no it doesn’t play well as mobile responsive. Additionally, the guys at Studiopress had created a plugin for Minimum to allow the use a thumbnail featured image and a large banner image. Given, I couldn’t get this code to work well on my site, I’m not going to take it as far is to see how it would play with that plugin.

    Thanks for the tutorial and for providing the code. Unfortunately, for it to work for some, they would also need to be CSS and PHP ninjas to be able to customize it to work for their sites. I had to remove it and go back to have it was. Thanks nonetheless. -Danny

    Reply

    • Hi Danny,
      The code in the tutorial won’t break anything in a standard installation of Minimum, but you’re right – the tutorial does require some working knowledge of CSS and PHP – especially if you’ve made other modifications to your theme. You can use conditional statements and declare a second ‘featured image’ size to handle featured images on those inner pages. I’ve played with the GMIE plugin you mention and it’s fantastic.

      Keep playing and have fun!
      Carrie

      Reply

  9. Hi Carrie,

    Fantabulous aticle! It is so very helpful to me as I do not have training in coding but I am editing my wordpress site on my own so I am learning as I go. I am using the Minimum theme and I just needed to ask if I want to change the huge featured image size on my home page to a smaller height do I simply add this code into the stylesheet and adapt it to the size I want? Or should I remove the irrelevant lines, if any?

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

    Cheers,
    Su

    Reply

  10. So often I’m looking for info/help on stuff and run across sites that are filled with “corrections” in the comment sections or the advice is insanely complex and would require a client to be familiar with something other than WordPress visual editor. This site is clearly not one of those – to echo the first commenter, I think quite possibly you are the Code Fairy Godmother! I am one of those people who never signs up for newsletters, etc. as a matter of policy/stubbornness, whatever. I’ve never done it – until now. For the first time ever, I’m actually going to use an optin form – yours! I consider myself intermediate, and there’s not a lot of stuff “out there” for a lot of us who aren’t up to our elbows in php all day, but are definitely not beginners, either. Thanks so much for so much great information! I just realized how spammy this comment looks, but I mean it sincerely, lol 🙂

    Reply

  11. I followed your instructions, but seem to have lost the picture on the home page. Where do I find it and how do I insert the picture of my choice. Sorry if this is a sophomoric question.

    Reply

  12. Hi Carrie,

    For some reason, my text continues to appear below my image on my home page.

    Do you know why this is the case?

    Reply

  13. Thank you so much, Fairy Codemother! 😉 I love it!!

    I managed to jack up the entire site by not commenting out the old featured image function before adding the new. But once that was all fixed and I got it all lined up right, there’s no way I would remove the overlay. I just love it that much.

    Wondering if adding a translucent white background (kinda see through) to the overlay is easy enough or maybe I should just add it to the featured image photo in Photoshop.

    Reply

    • That’s a tricky one. If you add it to the widget div, the text will pick up the opacity, too. I think if you get one extra div in behind the text you could target with an opaque background. Never do with Photoshop what you can do with a little CSS. 🙂

      Reply

  14. Hi Carrie! Loving your website. Lots of useful information!

    I’m thinking of purchasing the minimum theme from studiopress but I’d really love for the top navigation menu to remain sticky as you scroll down the page.. Do you know if this is easy to do?

    I’d also like the sticky menu to fade out when it’s not being hovered over. Basically, I want it to look like this! http://nikkijumper.com

    Let me know if you think this is do-able. Thank you! 🙂

    Reply

    • Hey Lauren,
      I haven’t done that customization, but it certainly could be done with a little custom CSS work. 🙂

      Minimum is a fun theme!

      Carrie

      Reply

  15. Hi Carrie,

    Great article, and I’m loving your site!

    Everything worked perfectly for me except one thing. My featured image is no longer mobile responsive.

    I did everything the article described and the only edit was the dimensions of my featured image (2000×600 instead of 1600×600).

    Is this a known problem?

    Reply

    • Just swapping out the image alone shouldn’t impact re-sizing on mobile. Maybe something else going on. Post a link to your site and I’ll take a look.

      Reply

        • Ah, I went back and read the tut – I didn’t test it originally for mobile responsive and so it is not. I’ll work up a revised tutorial as soon I can.

          In the mean time, add “margin: 0 auto;” to .my-text to center your overlay.

          Reply

          • Hi Carrie,

            I implemented the text overlay on my site and, after fiddling around, removed it as it was not responsive. Or more specifically, the image was no longer responsive.

            I too would love to see a reworked tutorial that is mobile-friendly. Thanks!

  16. I too would love to see a responsive solution. I’ve been ‘tinkering’ for hours without success.
    Thanks, Tom

    Reply

  17. Hi Carrie,

    Thank you for sharing your Genesis-wisdom…lots of useful information for WP novices like me!

    Add me to your ever growing list of Desperables interested in a mobile responsive text overlay for the Minimum featured image.

    My case: I’d like to add “(artwork-title) – detail” in the bottom right corner of my artwork(=FeaturedImage), on my art website: gordanavukovic.com

    Reply

  18. Great tutorial, thank you so much for sharing! I’m wondering if you had any ideas on how to do an image overlay over the Genesis Featured Posts thumbnails? So instead of an image behind it like a background does, an image on top of it?

    Reply

    • I haven’t done it, but I think the same principle would apply. You’ll have to play with positioning of that block level element of with the overlay image and then use opacity.

      One word of caution going that route, though – do a little reading on browser support for the opacity element and how that might impact accessibility (i.e. screen readers). If opacity fails, your image would be shown in all it’s glory, completely hiding whatever is behind it.

      Poke around over at css-tricks.com – there are some great articles. 🙂

      Reply

  19. Argh on trying to implement this on minimum pro…

    Looks like
    function minimum_featured_image() {
    now replaced with front-page.php code:
    if ( ! get_background_image() )
    return;

    And employs Scott Robin’s backstretch.js which makes having a max-height really hard..

    But might make just adding text and formatting css easier…

    Reply

    • You’re ahead of me – I haven’t gotten to play with Minimum Pro yet! Be on the lookout for a plugin from Andrew Norcross that makes a backstretch slideshow…cool stuff. 🙂

      Reply

  21. Awesome tutorial Carrie. Double awesome.

    The million dollar question for anyone… how this works for other themes?

    My theme has a homepage full width widget area, so inserting images via html works easily. But as this requires an overlay of text and CSS (of the hardcoded image), I’m wondering about work arounds.

    Is there a way to load an image to wp-content and tell the widget CSS to pull that image for a background, then insert text into the widget area via appearance > widgets, then style in CSS? Or another way?

    Thanks!

    Reply

  22. Hi Carrie, I am a fan of your Studio Press tutorials, and I finally have the project to use this one with. Only thing is, Minimum Theme has been updated. Will this tutorial work on the new Minimum? Would really like to use it. Thanks for any direction you can give…and great work!

    Reply

  24. 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

    Reply

    • 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

      Reply

  26. 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 ”;
    }

    Reply

    • 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.

      Reply

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

        Reply

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

          Reply

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

    Reply

  28. 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!

    Reply

  29. 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

    Reply

  30. 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.

    Reply

  31. 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.

    Reply

    • Hello, that would be considerably more effort to create a widget with that ability rather than just using CSS to position the widget where you’d like to.

      Reply

  33. 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.

    Reply

    • 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.

      Reply

  34. 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?

    Reply

    • 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.

      Reply

Trackbacks

Leave a Reply

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