Sridhar Katakam

Genesis and WordPress Tutorials

Overlaying text on background image in Minimum Pro

by 29 Comments

Update on July 18, 2016: Please follow this newer and updated tutorial instead of the following.

One of the distinguishing features of Minimum Pro, a Genesis child theme is the background image below header. genesis_after_header hook can be used to insert a div having our desired overlay text and positioned on top of the image.

Genesis Test Site – Just another WordPress site

Here are the details.

Note: In this post, content to appear on top of the background image is placed directly in functions.php. If you would like it to rather come from a widget, see Part 2 of this article.

Let's hook into genesis_after_header and add the overlay text

Add this in functions.php:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • If i implement this in my functions.php then i always have to go back to this file to edit the html. Can this html not be added with a wdget (like on the original article by Carrie?)

    Reply

  • Many questions on the studiopress forums discuss the backstretch and the size of the header.
    It seems that the resizing is done in a mysterious way. I have tried uploading a few header sizes (2000×600) or 1600×1050. But it always seems to weirly resize it.

    I saw on your latest blog post about different backgrounds per page ID that you use a image name like this:
    wallpaper_below_the_eiffel_tower_800.jpg

    What size images do you use for the header? Are they displayed correctly (in whole ?)

    Reply

    • There is nothing mysterious about the way resizing is done. The width of the image you see is the width of the viewport. The height will adjust proportionately.

      Let’s say a 800 x 524 image is uploaded as the background and I am viewing the site at desktop width using a 13″ Macbook Air the background image displayed on the webpage is 1440 x 943. 1440 is the viewport width. 943 = (524 × 1440)/800. Now this 943px tall image is the background for the entire webpage. The actual visible portion of the image is only as tall as you set it. In this post, we have set “.home-bkgrd-image-overlay-wrapper”‘s minimum height to 600px. Therefore the height of visible portion of the image is 600px minus 62px. What’s this 62px? It’s the height of “.site-header” div. We need to subtract that since it is fixed via CSS.

      I have modified the CSS in this article accordingly. Now the top portion of the image will no longer be “cut off”.

      Reply

  • i have been looking through your posts and tinkering around. you have some nice ideas… thanks for posting…

    i am curious what you think about an idea i have…

    the minimum pro parallax effect is nice but because of the way the background image is resized one cant use the effect and have an image that wont get parts of it cut out.

    i read and went through your post for
    http://www.sridharkatakam.com/setting-responsive-image-place-background-minimum-pro/

    it worked! however this got me thinking…

    would it be possible to keep the parallax effect with a non specific background image then center a second transparent image on top of that background like a logo…

    in this way you would get the best of both worlds… since you used icons above i thought perhaps a centered image might also be possible…

    what do you think?

    Reply

  • Hi

    Thanks for your tutorials and advice. I’m learning a lot from them.

    Can you please explain the logic for using the following code:

    printf( ”, genesis_attr( ‘home-bkgrd-image-overlay-wrapper’ ) );

    You’d get the same results by doing:

    echo ”;

    I see this printf method a lot in yours and many other Genesis tutorials. Is there a reason it’s done like this in this particular case? Echo seems a lot simpler.

    Thanks

    Reply

    • Your comments system deleted my code. Not sure how to post it. But I think you know what I mean? Why use the printf function when you could just echo the div.

      Reply

        • Hi. Thanks. I realise that. I’m just wondering if there is any particular reason people do it like this. Why make life complicated? I see this printf code in Genesis all the time. Surely there’s got to be some valid reason for using it?

          Reply

          • At the time of writing this tutorial, I was relatively new to Genesis and hence I thought it makes sense to use the same syntax as already present in the child themes. If I were to do it today, I would just use echo.

            As to whether there is any benefit of using the ‘complicated’ code, I do not know.

    • http://www.w3schools.com/php/func_string_printf.asp

      printf is useful when u want to print and perform a calculation or insert a variable all in the same line of code…. no great example in mind… but it seems to me that in at least one instance before i had to use printf instead of echo to perform a calculation with a variable and get it to print correctly…. echo simply woulf not return a value.. the variable… if i remember right was one of wordpress’s global variables

      Reply

  • I’m new to Genesis and needing this modification. I am adding a div on the child theme Minimum Pro and have been looking for something like this all day! Thank man, you’re awesome!

    Reply

  • Man I tried this but I got white screen of death twice. Both times when I tried to add ‘home-bkgrd-image-overlay’ to the structural wraps. Not only that, but I deleted it and still white screen. Then I used file manager to reset to original functions.php and still white screen!

    Reply

  • Hi Sridhar,

    Is there any way we can reduce the height of the background image so that the tagline is moved a little up and it is visible on the screen?

    Reply

  • Hi,

    I am new to this site. I am having a problem with the code for the overlay. I have a responsive image rather than the background image in my Minimum Pro theme based site. I have been following your code but for some reason the widget is not overlaying anything over the image. It is simply placing the information before (or after, depending on the priority set) the image. Could you please offer any suggestions or advice how to get the overlay working with a responsive image? Thank you very much.

    Reply

  • I’m not sure if this modification is causing my problem. I followed this tutorial and made an overlay as a widget, which works great, however now at the bottom after adding this, my home featured widgets double up and appear underneath the copyright. Any ideas as to what might be the problem?

    Reply

      • Thanks Sridhar, I ran through the tutorial in that link and my homepage widget is showing a better experience.
        I am however, still having the issue with the home featured widgets (the ones that appear right under the tagline on the homepage). For whatever reason, they are appearing right under the copyright at the bottom of the site as well (displaying twice on the homepage). I am not sure if this is something I did outside of your tutorial, but I thought there might be a chance that you know what is going on?

        Reply
    • >