Minimum Theme: How to Lay Text Over an Image

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

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 last week 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 position 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.

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 access your site via FTP to rescue any mis-placed semi-colons. You have been warned.

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 '<div id="featured-image"><img src="'. get_stylesheet_directory_uri() . '/images/sample.jpg" /></div>';
    }

To this:

function minimum_featured_image() {
    if ( is_home() ) {
	echo '<div id="featured-image"><img src="yourimage.jpg" class="underlay" />'; // add underlay class
	genesis_widget_area( 'my-widget', array( 'before' => '<div class="my-text">', ) );  //replace widget ID if needed
	echo '</div></div>';
    }

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!

7 day free trial

Comments

  1. says

    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.

    • says

      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. ;)

  2. says

    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.

  3. says

    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

  4. AnitaC says

    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.

  5. joshrhine says

    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!

    • says

      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

      • joshrhine says

        Carrie –
        Thanks for the reply! I did put text in there but I dont see anything. I dont even see the div in my browser’s inspector. The site is under massive construction and Im just not sure what Ive done wrong.
        http://lumetechnologies.com/

          • joshrhine says

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

          • says

            Ah! Try this:

            if ( is_home() ) {
            echo ‘

            ‘;
            }

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

  6. says

    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 !

  7. says

    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

    • says

      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

  8. says

    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

  9. says

    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 :)

  10. Etienne says

    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.

  11. Etienne says

    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?

  12. brenners78 says

    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.

    • says

      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. :)

  13. says

    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! :)

    • says

      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

  14. Brendan says

    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?

    • says

      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.

        • says

          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.

          • Dan B says

            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!

  15. Tom says

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

  16. says

    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

  17. says

    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?

    • says

      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. :)

  18. says

    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…

    • says

      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. :)

  19. MM says

    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!

  20. says

    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!

  21. says

    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

    • says

      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

  22. says

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

    • says

      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.

      • jason says

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

        • Jason says

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

Trackbacks