javascript - Background image not saving in WordPress Customizer

Question

I'm trying to set a background image in the WordPress Customizer. I can upload the image and see it preview in Customizer but after I save it, its not appearing on the live site.

I have the following code in my customizer.php file:

$wp_customize->add_setting( 'section_1_background_image', array(
    'default'           => get_template_directory_uri() . '/images/default.jpg',
       'transport'      => 'postMessage',
) );    
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'section_1_background_image_control', array(
    'label'             => __('Background Image','minisite'),
    'settings'          => 'section_1_background_image',
    'section'           => 'section_1',
    'priority' => 10,
) ) );

and the corresponding code in my customizer.js file

wp.customize( 'section_1_background_image', function( value ) {
    value.bind( function( newval ) {
        $('#wrapper-1').css('background-image', newval );
    } );
} );

This same setup works fine for background colors but I believe it has to do with "url" needing to be output in the css in front of the background-image filename, which it isn't doing.

I also tried the following with no success:

wp.customize( 'section_1_background_image', function( value ) {
    value.bind( function( newval ) {
        $('#wrapper-1').css('background-image', 'url("' + newval + '")' );
    } );
} );

Am I missing something?

Answer 1

If you're referring to the option to add background images when you navigate to Appearance -> Customize in WordPress' admin I typically provide the option to customize the background through custom-background in my functions.php:

$custom_background = array(
    'default-color'             => '00ff00',
    'default-image'             => get_template_directory() . '/img/default_background.png',
    'background-repeat'         => 'tile',
    'default-position-x'        => 'center',
    'background-attachment'     => 'fixed',
    'wp-head-callback'          => '_custom_background_cb'
);
add_theme_support( 'custom-background', $custom_background );