How to disable Backstretch in Metro Pro

Metro Pro uses Backstretch to make the background image uploaded in WordPress dashboard full-sized. But what if you do not want that to happen and instead want the background image to say, tile per the settings at Appearance > Background?

In this article I will show how we can disable Backstretch in Metro Pro.

Edit functions.php.

Comment out

1
add_action( 'wp_enqueue_scripts', 'metro_enqueue_scripts' );
view raw gistfile1.php hosted with ❤ by GitHub

and change

1
add_theme_support( 'custom-background', array( 'wp-head-callback' => 'metro_background_callback' ) )
view raw gistfile2.php hosted with ❤ by GitHub

to

1
add_theme_support( 'custom-background' );
view raw gistfile3.php hosted with ❤ by GitHub

Stay up to date

Get tips on Genesis, WordPress, Web design & more

Join 641 other subscribers

Donate

Found this article helpful?

Comments

  1. Valerie says

    Brilliant! I did get an error because, originally, I only commented out “add_action( ‘wp_enqueue_scripts’, ‘metro_enqueue_scripts’ );”

    I found I had to comment out the entire function…. now my background tiles.

    Thanks.

  2. sameer says

    hi Sridhar,

    awesome work man. I recently posted a query regarding your article of making metro pro full width header and navigation.

    I am doing everything right but my style.css cant load wrap.png and subnav.png . please take a look here if you have a minute. tsmplay . com

    what you think i am doing wrong ?

  3. Petri says

    Hi Sridhar,
    Can you tell me how to do this in the Agency Pro theme? I see a lot of backstretch code in the functions.php file and am afraid to disable all this code.
    Thanks!

  4. says

    Hi Sridhar

    Thank you for all your amazing work, I want you to know that I really appreciate all the knowledge you share on your site, making my day easier.

    I came across this particular page, searching for help for my News Pro theme. I really hope you can answer my question….

    “How would you change the background image to display small images in e.g. one corner of the site page in a responsive way?”

    I want to keep the the white background/transparent color, but in two corners I want a little image. Here is an example:
    As you can see, there is an image that’s kinda faded in the lower right corner, and no matter if I zoom in or out (ctrl +/-) on the page, the background and the image remains intact.

    This is really a hurdle, so I really hope you can help.

    Best Regards

    Eugene

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>