How to use WP Theme Option: Custom_Backgrounds on specific element?

Question

I want to use the WP Theme option Custom_Backgrounds on a specific div.

By default it adds it to the body and I dont see a way of changing this.

Does anyone know how?

Answer 1

If your theme uses in-built custom-background callback then you can overwrite add_theme_support in your child theme. Yo do not need to use remove_theme_support.

First add custom-background support with your callback function.

$defaults_args = array(
    'wp-head-callback'       => 'my_custom_background_cb',
);
add_theme_support( 'custom-background', $defaults_args );

In callback function specify div CSS class or ID

function my_custom_background_cb() {
    $bg_image = get_background_image();

    if ( empty( $bg_image ) ) {
        return;
    } else { ?>
        <style type="text/css">
            .your-div-class {
                background: url('<?php echo $bg_image; ?>') no-repeat;
            }
        </style><?php
    }
}

If theme printing CSS in header or using some other custom function (not using callback function) then you can remove body background image by CSS.