Sridhar Katakam

Genesis and WordPress Tutorials

Overlaying text on background image in Minimum Pro – Part 2

by 18 Comments

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

In this post I provided the code for displaying content put in functions.php to appear as an overlay on Minimum Pro's home background image. uddhava asked in the comments:

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

i.e., what the user wants is:

Screen Shot 2013-09-11 at 10.38.57 AM

home-image-overlay-widget

Certainly can be done and here's how.

Step 1

Register a sidebar (widgetized area) and overlay its contents on the background image. Add this in functions.php:

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

Already a member? Log in below or here.

  • Namaste Sridhar,

    That is amazing !!! I got it working flawlessly the first time i tried it. It makes perfect sense…
    Now we can show anything in this slider as we like.

    And we almost reach perfection…. Get a slider/fader instead of the static image. I tried using WooSlider inside the background image widget. But so far i didnt get it right yet…. 😉

    Reply

  • Thanks for coming through with this updated tutorial for Minimum 2.0! I have a question though, would it be possible to add additional styling elements to allow the text to be transparent, a different font, etc?

    Reply

  • Sridhar,

    I recently added the Genesis Sidebars plugin. As this is all very new to me. I was wondering if this plugin can be used, perhaps in conjunction with the Genesis Extender plugin (I do not have that one) to do what you show above?

    Thanks

    Pam

    Reply

  • Ok I just want to MAKE sure, I was able to make this work and use it for a little different affect that I think will work for me….the text that’s over the top is it acceptable for SEO purposes? Like I can add HEADING tags etc and for SEO this is OK?

    Reply

  • Feeling a little silly here, but where am I adding the image? I’ve got the white space showing up on my test site, however I’m not entirely sure where I’m adding the background image. Thanks!

    Reply

  • Hi Sridhar,

    Thanks so much for tackling all of these customizations. I am using Easing Slider Lite on the home page of a site I am redesigning. http://www.smorellilaw.com/SMorelliLaw/ (ignore the photos, they are just for testing).

    I want the words: Integrity. Dedication. Excellence. to overlay all images in the slider. I’ve tried doing it with your functions.php instructions, and by adding a text widget. It keeps breaking, and I’m pulling my hair out.

    The text widget instructions were fine until I added the line for structural wrap support, then he good ‘ole internal error message appeared =/

    Can you please help??

    Thanks so much!

    Reply
    • >