changing Specific section background image in wordpress

Question

How do I change specific section background image in wordpress?

I have a background image set via CSS:

.section3 {
    background: url(bg.jpg) no repeat;
}

Say I want to change this image later via the WordPress dashboard. How would I do this? I want to add functionality so that user can change the image in future.

The default background function only enables the user to change the background color on the page. I want to target this specific section.

Answer 1

Use the Customizer API ( Advanced Topics ) to a modify a dynamic background.

---

UPDATE

Eric Lewis just presented an idea last night that might make it possible to customize single post content, not just global theme options using Customizer. Check out Custom CSS per post in WordPress. He also shows how to add a button to the edit post page which brings up the the customizer in a modal window for faster AJAX previews.

---

Gist

add_action( 'admin_enqueue_scripts', function($hook_suffix) {
    if ( in_array( $hook_suffix, array( 'post.php', 'post-new.php' ) ) ) {
        wp_enqueue_script( 'customize-loader' );
    }
} );

add_action( 'post_submitbox_misc_actions', function() {
    $customize_url = add_query_arg(

        array(
            // current page
            'url' => urlencode( get_post_permalink() ),

            // custom url
            // 'url' => urlencode( home_url() . '/page-to-preview/' ),

            // deeplink to panel
            // 'autofocus' => array( 'panel' => 'widgets' )
        ),

        wp_customize_url()
    );

    ?><button class="load-customize"
              href="<?php echo esc_url( $customize_url ) ?>"
              type="button">Show In Customizer</button>
    <?php
} );

---

There are also contextual controls if you want to target specific pages.

But I think the easiest way to use Advanced Custom Fields.

Answer 2

Using the customizer, add this piece of code in your functions.php

add_action( 'customize_register' , 'my_theme_options' );
function my_theme_options( $wp_customize ) {
    $wp_customize->add_section('mytheme_section_bg_img', array(
            'title'       => __( 'Section name', 'my_theme_slug' ),
            'priority'    => 100,
            'capability'  => 'edit_theme_options',
            'description' => __('Select a background image', 'my_theme_slug'), 
        ) 
    );  

    $wp_customize->add_setting('section_bg_img');

    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'section_bg_img', array(
            'label'    => __( 'Background image', 'my_theme_slug' ), 
            'section'  => 'mytheme_section_bg_img',
            'settings' => 'section_bg_img',
            'priority' => 10,
        ) 
    ));
}

You must change "my_theme_slug" by your theme slug.

Once done, you must select an image from the customizer, and finally print it wherever you want using this code:

<div<?php

    if ( $section_bg_img = get_theme_mod( 'section_bg_img' ) )
        echo ' style="background-image: url(' . $section_bg_img . ');"';

?>></div>

Hope it helps!