Background image not saving in WordPress Customize

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 );

Answer 2

As it turns out, the correct code for displaying it in the Customizer was:

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

However, this wasn't the problem for saving it properly on the front end. That was solved here.

Answer 3

You're adding the control wrong.

$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', array(
    'label'             => __('Background Image','minisite'),
    'settings'          => 'section_1_background_image',
    'section'           => 'section_1',
    'priority' => 10,
) ) );

The name in the WP_Customize_Image_Control should be same as the setting name.

You're referencing the section_1_background_image_control, and the setting name is section_1_background_image.

EDIT

To make your image appear, you need to add in your javascript (I'm following the twenty fifteen theme here)

( function( $ ) {
    var style = $( '#twentysixteen-color-scheme-css' ),
        api = wp.customize;

    if ( ! style.length ) {
        style = $( 'head' ).append( '<style type="text/css" id="twentysixteen-color-scheme-css" />' )
                            .find( '#twentysixteen-color-scheme-css' );
    }

    api( 'section_1_background_image', function( value ) {
        value.bind( function( newval ) {
            var background_image = 'body{ background-image: url( ' + newval + '); }'
            style.text( background_image );
        } );
    } );


} )( jQuery );

Where you toggle all your live changes. I added the image to the body, but you can change that to #wrapper-1

var background_image = '#wrapper-1{ background-image: url( ' + newval + '); }'

EDIT 2

This also works for me:

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

Just replace body with #wrapper-1.

Just realized, you've said that when you save the image, the wrapper doesn't have saved the image. Did you create a dynamic-css.php where you'll place all the custom css?

Usually I create a dynamic-css.php where I place $custom_css variable and place the results of the customizer in.

$section_1_background_image= get_theme_mod( 'section_1_background_image', '' );
if ( '' !== $section_1_background_image) {
    $custom_css .= '#wrapper-1{background-image: url("' . esc_attr( $body_background ) . '");}';
}

Then I define the same variable in my functions.php and add it as an inline style:

$custom_css = '';
wp_add_inline_style( 'main_css', $custom_css );

Where main_css is the hook name where you call the get_stylesheet_uri(). This code must go after the main stylesheet enqueue.