Sridhar Katakam

Genesis and WordPress Tutorials

How to add a widget section with a responsive background image below header in Minimum Pro

by 17 Comments

In one of my earlier posts titled Overlaying text on background image in Minimum Pro – Part 2, I provided the steps to overlay text that appears below site header on homepage's background image.

In this article I am going to explain how to set the image uploaded in the dashboard as a background to a widget section below site header.

widget-section-below-header-responsive-bkgrd

Disable backstretch

As we don't want the background image to be applied for the entire homepage, let's comment out or delete the following in front-page.php:

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

Already a member? Log in below or here.

  • Hi Sridhar
    I am afraid there may be something not quite right here. I have followed these instructions several times, each time with the same result – the background image does not appear. Is there a typo or another stage to add?
    Many thanks

    Reply

  • Yeah, this doesn’t seem to work. I’ve successfully followed many of your other tutorials, Sridhar, and appreciate your work, but this one has issues. Same issue…the image doesn’t display.

    Does anyone have a link to a functioning example?

    Reply

  • 1. Took Genesis Sample Theme
    2. Added this code to it, uploaded new background image.
    3. Looks perfect in IE but does not show at all in Google Chrome.

    What could be reason or any work around to fix this problem. Also, could it be background-size property not working well in Chrome browser. New insights from your end will be appreciated.

    Reply

  • Hi Sridhar – I have tried adding the code to the function.php file and it corrupts my whole site – your instructions are easy what am I doing wrong here?

    1. the first part: add_theme_support( ‘custom-background’, array( ‘wp-head-callback’ => ‘__return_false’ ) ); – this is already changed??

    2. As soon as I paste the whole editing section just disappears:

    genesis_register_sidebar( array(
    ‘id’ => ‘home-below-header’,
    ‘name’ => __( ‘Home Below Header’, ‘minimum’ ),
    ‘description’ => __( ‘This is the home below header section.’, ‘minimum’ ),
    ) );

    //* Add custom callback for background
    function minimum_background_callback() {
    //* Do nothing if we have no background image or we’re not on the front page
    if ( ! get_background_image() || ! is_front_page() )
    return;

    add_action( ‘genesis_after_header’, ‘home_below_header’, 9 );
    function home_below_header() {

    echo ”;
    ob_start();
    genesis_widget_area( ‘home-below-header’ );
    $home_below_header_sidebar_content = ob_get_clean();
    echo $home_below_header_sidebar_content;
    echo ”;
    }

    }

    Reply
    • >