So right now I’m making some major changes in all my themes and was stuck at header images. First I tried to use the following code to set the transport to postMessage but it didn’t work:

$wp_customize->get_setting( 'header_image' )->transport = 'postMessage';

It was still refreshing the page in the Customizer. I tried to search for a solution but it looks like no one ever posted a solution (not on the first page at least), so I tried to resolve it myself.

So I tried to look in the header image control’s file in the core, which is /wp-includes/customize/class-wp-customize-header-image-control.php

And then I tried few things to see what works out and here’s what worked out for me. In the customizer.php file of my theme, I used the following code:

function theme_customize_register($wp_customize) {
    $wp_customize->get_setting( 'header_image'  )->transport = 'postMessage';
    $wp_customize->get_setting( 'header_image_data'  )->transport = 'postMessage';
}
add_action('customize_register', 'theme_customize_register');

And in the JS file, I used this:

( function( $ ) {

    // Style > Background > Background Image
    wp.customize( 'header_image', function( value ) {
        value.bind( function( newval ) {
            $('.site-header').css( 'background-image', 'url(' +newval+')' );
        } );
    } );
    
} )( jQuery );

And it worked for me. I don’t know if it’s the best way to do this or not but it worked for me. Hope it helps you. 🙂