Sridhar Katakam

Genesis and WordPress Tutorials

Responsive header banner image in Beautiful Pro

by 27 Comments

In Beautiful Pro the .site-header-banner div has background image set via CSS and as such is not responsive. It is possible to make image backgrounds responsive but I personally prefer to just "embed" images vs using them as backgrounds and using CSS/JS to make them responsive. Just feels more natural and the proper way of doing things.

In this article I show how we can disable the background image option in Beautiful Pro and modify functions.php to insert a image present in child theme's images directory in the .site-header-banner div.

Desktop:

beautiful-pro-dekstop

Tablet:

beautiful-pro-tablet

Mobile:

beautiful-pro-mobile

Edit functions.php.

Comment out or delete

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

Already a member? Log in below or here.

  • Hi Sridar,

    Thanks for the tutorial. Worked really well. But I have a problem with white space/padding under the responsive banner that increases when viewed on smaller screens. Do you have a suggestion to remedy this please?
    http://ruapehu2.helpmenet.co.nz/

    Many thanks,
    Anna

    Reply

  • I’m not seeing the last bit of code you say to replace: echo ”;

    All I have left after commenting out first part of instructions is:

    //* Add custom background callback
    function voter_background_callback() {

    $background = get_background_image();
    $color = get_background_color();

    if ( ! $background && ! $color )
    return;

    echo trim( sprintf(
    “.custom-background .site-header-banner { background: %s %s %s %s %s; } “,
    $background ? ‘url(‘. $background .’)’ : ”,
    $color ? ‘#’. $color : ‘transparent’,
    get_theme_mod( ‘background_repeat’, ‘repeat’ ),
    get_theme_mod( ‘background_position_x’, ‘left’ ),
    get_theme_mod( ‘background_attachment’, ‘scroll’ )
    ) );
    }

    Reply

  • I followed the instruction in the tutorial, but now instead of my banner showing, there is a small photo icon. I’ve triple checked my entries and can’t figure out where I went wrong. Any suggestions? Thanks!

    alisonmclennan.com

    Reply

  • any idea if this is applicable to Foodie Pro with too much adjustments? got a question to apply this to Foodie Pro but don’t have a copy of the theme to try it out.

    Reply

  • Hi there,

    Just followed your tutorial but had a slight issue. I could see that the banner had gone, but I was not seeing the new banner.. Apparently there was some coding that is not mentioned in the above that needed to be done.

    commented out the 2 lines just before the “echo ”;”

    ”’/*if ( ! get_background_image() )
    return;*/”’

    A friend from Slack kindly had a look at my functions file and did the above and the banner then came through.

    Thought it would be worth mentioning.

    thanks

    Steff

    Reply

  • Hi Sridhar,

    For a reason I ignore, I’ve been able to put that in place once and it worked perfectly.
    But now i try again and the banner won’t show up at all. I’ve followed everything. Have ever written the full url for the image path but no banner at all..
    What could be the problem?

    Thanks.

    Reply
    • >