Custom background for the index page only?

I am stuck at add_custom_background.

I can change background color/image but I only want to change my index page. Currently, the changes apply on the whole page.

I want to make the changes from WP-admin.

How can I specify it to a specific page ?

Edit:

I just checked im running 3.3.1. So my version is not supported to use add_theme_support( ‘custom-background’ );

instead I want to use add_custom_background.

  if ( is_front_page() )
{
   add_custom_background();
}

Cant get it to work.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can check in your callback function if you are an the front page.

Sample code for the theme’s functions.php:

add_action( 'after_setup_theme', 'wpse_67480_theme_setup' );

function wpse_67480_theme_setup()
{
    $bg_options = array (
        'wp-head-callback' => 'wpse_67480_background_frontend',
        'default-color'    => 'f0f0f0',
        'default-image'    => '',
    );
    add_theme_support( 'custom-background', $bg_options );

    add_theme_support(
        'custom-header',
        array (
            'width'       => 960,
            'height'      => 200,
            'flex-height' => TRUE,
            'flex-width'  => TRUE,
            'header-text' => FALSE,
            'wp-head-callback' => 'wpse_67480_header_frontend',
        )
    );
}

wpse_67480_background_frontend()
{
    if ( is_front_page() )
    {
        _custom_background_cb();
    }
}

wpse_67480_header_frontend()
{
    if ( ! is_front_page() )
    {
        return;
    }

    // create your header code here
}

Method 2

You can use the body class and define your background in your style.css

Example:
background for frontpage:

body.home { background: #eee; } 

background for pages

body.page { background: #ccc; }

background for archive pages

body.archive { background ... }

and so on.
Just check your source code for the body class of the site you want to address.

If your background is for another element but body you can add the body class in front of it:

body.home .wrapper { background ... }

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0