Sridhar Katakam

Genesis and WordPress Tutorials

Setting up a responsive image in place of background in Minimum Pro

by 75 Comments

Updated on January 20, 2020

Got this in a mail:

...

My goal is simple. An image that is big and wide, that spans the entire width of the top of the screen above the minimum-pro tagline that is mobile responsive.

I'm writing you because you've been the most active with minimum-pro and I'm hoping you can point me in the right direction of a sound, responsive solution.

...

The user wants to know how to replace the background header image in Minimum Pro with a image that is responsive. Here's how it can be done.

But first, a video demo:

Tested and working in Minimum Pro 3.2.1

Step 1

In front-page.php

a) comment out or delete

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

Already a member? Log in below or here.

  • Hi Sridhar, I got this to work. Thanks 🙂
    Is it possible to have the responsive image fixed (re fixed scrolling) like it is in the default Minimum Pro demo content?

    Reply

  • Hi Sridhar,
    This is great. I have it working and have been experimenting with overlaying text on the main image. I did this by adding a div below the image in your code and then positioning it absolutely. However I am not sure this is the best way to go about it. I also have an issue with getting the text responsive.
    What would you recommend? Is there a better way to overlay text in this instance?
    Many thanks

    Reply

  • Awesome customization here…

    My question: How do I get the custom responsive image I added to the homepage using the code above to my blog posts and/or static pages?

    Appreciate it!

    Reply

  • Hi Sridhar,

    I’ve had issues trying to get that stretch resolved. Hopefully this will help! Thank you. Quick question, what is the best size for that image 1600 x 550 or 1800 x 600? or how large to accommodate the responsiveness without jeopardizing the clarity on various viewing screen?

    thanks, Patricia

    Reply

    • Hi Pat,

      There is no standard dimensions for the image. You can just pick a image that’s wide enough (1600 should be good enough). I’ve updated the CSS in my blog post to make the image stretch and become full width in case of high resolutions screens.

      Reply

  • Hi Sridhar, Thanks for this info. One question. The div class site-tagline is now too high on the home page but perfect on the inner pages. When I change it to be perfect on the home page, it’s too short and cut off on the inner pages. Have you seen that or know the best way to fix?

    Thanks!

    Mark

    Reply

  • Hi Sridhar! This post saved me. Thank you so much. Just one quick question: It seems that a little bit of the top of my background image is being cut off, leaving a little bit of white space under the image. How do I fix this? Thank you so much. You’re blog is awesome. In-case you need to see what I’m talking about: http://www.amandachristian.com

    Reply

  • Does this exact method still work with the latest Genesis, I am using the latest theme and framework and can’t get it to work, every time add the functions it returns the white screen!?

    Thanks, hope you can point me in the right direction

    Reply

  • Hi,

    I have problem with background image in minimum pro theme. I would like background image to scroll up with the rest of the content of the website. Scroll option in custom background area doesn’t work. Can you help me please? What needs to be done? Thank you.

    Reply

  • Hi,
    If I wanted a responsive splash image above the tagline (minimum pro) as above but on various pages – how do I do this?
    Since there is no background image – I shouldn’t need to remove anything. Is that right?
    Would I just use:

    //* Add the main image above site tagline section (where background image would appear)
    add_action( ‘genesis_after_header’, ‘sk_main_image’, 9 );
    function sk_main_image() {
    printf( ”, genesis_attr( ‘main-image’ ) ); ?>

    <?php echo '’;
    }

    Reply

  • How do you ‘comment out’ in the tutorial above

    Edit front-page.php. Comment out

    add_action( ‘wp_enqueue_scripts’, ‘minimum_front_page_enqueue_scripts’ );

    Also, where exactly does this code go?

    Add the code to display image above tagline

    After

    //* Force full width content layout
    add_filter( ‘genesis_pre_get_option_site_layout’, ‘__genesis_return_full_width_content’ );

    For example my front-page.php first few lines are listed below, is it somewhere in here that I put the above //* Force full width content layout code?

    ‘minimum_background_callback’ ) );

    //* Add custom background callback for background color
    function minimum_background_callback() {

    if ( ! get_background_color() )
    return;

    printf( ‘body { background-color: #%s; }’ . “\n”, get_background_color() );

    }

    Reply

  • Great website–thanks so much! I used your code to help with my picture on my homepage but the picture does not show up on mobile devices anymore. It works fine on normal computers but when viewed on tablet/phone it doesn’t display picture.

    http://www.kevinbibelhausen.com

    Reply

  • When I added the

    Add custom background callback for background
    function minimum_background_callback

    I get the following error
    Parse error: syntax error, unexpected end of file in /home/xxxxxx/public_html/new/wp-content/themes/minimum-pro/functions.php on line 232

    the only other change I have made, other than the preceding steps, is to add a custom image size.

    Any ideas what is causing the error?

    Reply

  • The code doesn’t work. When I try the updated code, it just give me a white page. Have to edit the functions.php in FTP and remove the code to get my site up and running. Do you have any idea?

    Reply

  • Once again, Sridhar, you saved the day!! I needed to do this in Modern Portfolio Pro. Client doesn’t want/need the scrolling menu, anyway. Using another of your tutorials I put the primary nav back on the home page, put the background image in place, and am off to put the site description back on (home page only). This is so perfect because one of these days my client may want to change the picture out herself. Because it is set as a background image, she’ll be able to do that.

    Thanks again so much Sridhar!!

    Reply

  • I’m confused. I copied my live site (currently using the old Minimum) to a staging site and then activated Minimum Pro. When I open front-page.php, there is no such line as this one to disable:

    add_action( ‘wp_enqueue_scripts’, ‘minimum_front_page_enqueue_scripts’ );

    Without that, the rest of the script simply makes another image below it. What am I missing?

    Reply

  • I hope that I copied all of your changes and additions correctly, but it is not working. There is a large black space. Please take a look, and let me know what I did wrong.

    Thank you,
    Janet

    Reply

    • I do have the photos showing up and responsive, but there is still the huge white space. I hope this can be fixed with the style.css.

      Any suggestions?

      Janet

      Reply

  • Hi Sridhar,

    This is an excellent tutorial. Can you tell me how to do this in the Parallax Pro theme? I have a background image that has a white strip at the top and an arrow at the bottom and when I resize Parallax the top and bottom get cut off. So this looks like a good solution for this.

    Thanks

    Reply

  • Hi,

    This is a great post, Sridhar. I would like to apply this to the Parallax Pro theme, but there is no
    add_theme_support( ‘custom-background’, array( ‘wp-head-callback’ => ‘__return_false’ ) );

    Can you show how to apply this tutorial to Parallax Pro?

    Thanks

    reposting because my first post is not showing up for some reason.

    Reply

    • Hi,

      I actually figured this out (thanks to your instructions, of course). Now I would like to overlay some text over this. I am using the instructions you provided in your “Overlaying text on background image in Minimum Pro” tutorial. This has created a background over the previous one. Obviously, I am missing something simple. Would appreciate any help, thanks.

      Reply

  • Hi,

    I’m using the second solution that you provided and it’s perfect!
    Is it possible to change the image using a media query? I’ve tried

    @media only screen and (max-width: 960px) {

    .custom-bg img{
    background: url(…);
    }

    }

    But I get no change as I resize. Any help would be appreciated.

    Thanks

    Reply

  • printf( '', genesis_attr( 'main-image' ) );

    In the code above, if you only wanted to output main-image as the class of the div then you could have done manually too. Right?

    So, is it just about the preference or is there some other reason?

    Reply

    • Yes. At the time of writing this I wrote it that way as the child theme already used that kind of code.

      Now a days I just do it manually.

      There may be a benefit of doing it the ‘Genesis way’ that I do not know of. Try asking in #code-review in Slack.

      Reply

  • Hi there. I can not get this tutorial to work for me, please advise. I know this is an older tutorial so I thought maybe something had changed.

    I have stepped through the tutorial and the first set of instructions removed the background image completely, then after using the UPDATE code section I get the white screen of death each time. I am working on the site locally, so I can’t share a URL.

    One question: Does the UPDATE section completely negate the first part? I tried removing the added code to front-page.php and leaving it in hopes that it would fix the issue. However, neither solution worked.

    It seems like the //Add background callback // in functions.php is what causes the issue.

    Any help or suggestions greatly appreciated.

    Reply

  • Hi Sridhar!

    I tried this tutorial and now I have two backgrounds images in the front page. I’ve removed the featured widget area from my functions.php and front-page.php and replace it with widgets areas and I can still see like 10px of the background image below which is not responsive, the new one added below the header works great, btw.
    Here’s a screenshot:
    http://s3.postimg.org/ukuqx22f7/0002.png

    I appreciate any suggestion, but I understand if you can’t help me.
    Thanks!

    Reply

  • First of all, thanks for your site. Made a lot of complex things easier to handle.

    I feel like I did this wrong. I had to resize my image so it was 1600 wide but what is the best height. I seem to have a white bar under my background image and I don’t want that there. Is there a padding setting that I am missing or should the image be taller? Please let me know.

    For reference, here is the website. It’s obviously still in construction.

    http://colinpcahoon.com

    Reply

  • I’m not sure these instructions have been updated to the latest version of Minimum Pro. I recently installed version 3.2.1 and I’m having the following issues:

    In Step 2, I don’t see a “minimum_background_callback” function anywhere in function.php.
    In Step 4, the Minimum Pro theme does not provide a “Background” tab under “Appearance”.

    Help would be much appreciated!

    Reply

  • Thanks Sridhar!

    But now I have my image on every page. What did I do wrong?

    Also, any way to make it parallax like the original Minimum pro demo?

    Thanks!

    Reply

    • In Step 1, the PHP changes are to be done in front-page.php which applies only to the site’s front page. It is perplexing to read that the image is visible on all pages of the site.

      Can you provide the URL of your site?

      Also, any way to make it parallax like the original Minimum pro demo?

      No. Parallax effect is possible only with background images as far as I know.

      Reply

  • Hi, I was able to remove the backstretch image, and replace it with another one which is actually the image I wanted to use for a header.

    Here is the page: https://vi-control.net/portal3/

    However, I have a few questions:

    1- How do I center the backstretch/header image?
    2- How do I make the backstretch/header image show on ALL pages, and be clickable to get back to the home page? (the tutorial you have above is for the older Minimum Pro, so the code is different, there is no “if ( ! get_background_color() )” I could use and replace.

    3- Also in Minimum Pro, is there a “box” layout I could use? I need to show a different background that the white color.
    4- ^ Which also means I need to make the navigation bar the same width as the header.

    Many thanks!

    Andre

    Reply

    • Hi Andre,

      The image will be centered automatically since we are setting its width to 100%. I can see that it (being centered) is working fine: https://d.pr/i/R87mlL.
      I’ve updated the tutorial. There is nothing to find and replace in Step 2. We need to add support for custom background in its place.
      You can add this CSS and tweak it further to your liking: https://pastebin.com/raw/bqdjRRbt

      If you have any further questions, I can help you out in a screen sharing session using Zoom. Let me know.

      Reply

      • Hi Sridhar,

        I’m using Chrome, and this is what I have:
        https://gyazo.com/205e135c8b007272b6dfe992a2db5a17

        1- The box layout works (thanks!), I need to make a few tweaks though as the white background for the site inner should go all the way to the navigation. Plus, the background I added stops at the top menu.

        Is there coding from backstretch I need to completely remove?

        2- To make the header clickable I used the normal header feature in Customize. That way it shows on all pages too. However, as you see there are issues:

        3- the header isn’t height: 100% only 50% or so, and the background doesn’t reach above the top menu.

        4- on mobile view, the header image isn’t responsive for all sizes, and the gaps below it are even worse.

        What am I missing?

        What does a Zoom session entail?

        Thank you,

        Andre

        Reply

          • I live in Alberta, Canada. So this time works best for me.

            San Francisco PST United States, California
            2:30p Mon, Jan 20 -3:00p Mon, Jan 20

            Please confirm? (how do I get an email notification that you responded?)

            Andre

          • VERY HAPPY to report that my issues have been fixed thanks for Sridhar. What has been causing me headaches and confusion, no more does.

            I highly recommend him to anyone having “mysterious” issues with Minimum Pro, or any other WordPress themes – get a hold of Sridhar. I’ve had bad experiences before hiring “professionals” but not this time. He works fast and creatively, is knowledgeable and polite. 🙂

            I will be contacting him in the future when I run into problems that I can’t solve. If you have been where I was, you know what this feels like!

            With gratitude,

            Andre

    • >